I’m working on embedding YouTube videos but I’m running into an issue with the title overlay that shows up when users move their cursor over the video player. I need to completely remove this hover effect so viewers can’t see the video title or get access to the original YouTube link.
I’ve already implemented some URL parameters to restrict user controls:
Disabled the control bar using controls=0
Turned off keyboard shortcuts with disablekb=1
Added the egm=1 parameter
My current embed URL looks like this: https://www.youtube.com/embed/VIDEO_ID?controls=0&disablekb=1&egm=1
Is there a specific parameter or CSS method that can hide the title bar that appears on hover? I want to make sure users stay focused on the content without being tempted to visit the original video page.
Unfortunately, YouTube removed most of the parameters that could hide the title overlay a few years back due to policy changes. The showinfo=0 parameter used to work but has been deprecated since 2018. What I’ve found works reliably is using CSS to overlay a transparent div on top of the iframe. You can position it precisely over the title area and set pointer-events to none so it doesn’t interfere with video playback controls. Something like positioning a div with position: absolute and z-index: 10 over the top portion of the player. Another approach is switching to the YouTube API player instead of iframe embeds, which gives you more granular control over the interface elements. The API method requires more setup but provides better customization options for hiding specific UI components.