YouTube embed showinfo has been deprecated

Question

We are using a YouTube video on our website as a hero banner.

However few days ago it started showing it's title, watch later button and a share button. We were able to hide them using &showinfo=0 at the end if the URL.

I found out that showinfo has been deprecated and thus you can no longer hide the fact that it is a YouTube video showing there.

Is there any other parameter that might be able to do the same thing?

You cannot do it with CSS or JavaScript as it is an iframe.

Any ideas are much appreciated.

UPDATE:

Any layer or mask over the video doesn't help, as the info shows when the video is loading, or if you click outside the browser, the video will pause and the info shows.

Hiding the top ~60px works, but it is not a good solution for me.

Answer 1

Directly from show info

Note: This is a deprecation announcement for the showinfo parameter. In addition, the behavior for the rel parameter is changing. Titles, channel information, and related videos are an important part of YouTube’s core user experience, and these changes help to make the YouTube viewing experience consistent across different platforms.

The behavior for the rel parameter is changing on or after September 25, 2018. The effect of the change is that you will not be able to disable related videos. However, you will have the option of specifying that the related videos shown in the player should be from the same channel as the video that was just played.

It clearly states that this is something they consider to be part of the cor youtube experience. There is no suggestion of a workaround or a new parameter that you could send to archive the old results. They are removing it. If you tried to force it out using javascript and css i would almost suggest you are against the TOC which states your not allowed to change that display. People should know you are showing something from YouTube

Answer 2

If you need to hide the info, ideally go for Vimeo pro (which properly supports a no info embed),

Otherwise there is a simple workaround:

https://jsfiddle.net/10ov5hgw/1/

It cuts off the bottom & top 60px of the iframe, but via overflow rather than a gross looking black bar on top, so video still looks fullscreen the entire time (and barely any of the video is cutout if you force 720) ,

This hack supports having to support mobile views aswell, without heavily impacting the visible area of the video.

.video-container{
  width:100vw;
  height:100vh;
  overflow:hidden;
  position:relative;
}
.video-container iframe,{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.video-container iframe, {
  pointer-events: none;
}
.video-container iframe{
  position: absolute;
  top: -60px;
  left: 0;
  width: 100%;
  height: calc(100% + 120px);
}
.video-foreground{
  pointer-events:none;
}

<div class="video-container" >
    <div class="video-foreground">
        <iframe
               src="https://www.youtube.com/embed/W0LHTWG-UmQ?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&playlist=W0LHTWG-UmQ&mute=1"
               frameBorder="0" allowFullScreen>

        </iframe>
    </div>             
</div>