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.

Leeanneleeboard

Just figured out that the "more video" panel is showing only if iframe width >= 480px. In some case, setting its width to 479px could be a workaround... – Vanscoy

I cannot replicate this. Have you got an example? – Mauramauralia

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

Vaticinate

Thank you for your answer. I hope someone has come up with a solution that does not go against the TOC. – Leeanneleeboard

You do realize that you sent me a quote of the link I posted in my question, right :D – Leeanneleeboard

@Leeanneleeboard yup sometimes people fail to read even what they posted. A number of times i have seen people posting links to stuff that it says it doesnt work and i have to point that out :) I hope you find a work around but if you are looking for something from Youtube this is what they say. Working around their intentions is never going to be stable. Google is smarter than us. – Vaticinate

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>                                        

Oloroso

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

@Daut, this is a hack on top of a hack, but you could make the YouTube video's iframe height an extra 120 pixels, which gives it 60 pixel black bars on the top and bottom, and this is the section you cut off. (These hacks are likely against TOS.) – Breadstuff

@Breadstuff and Daut, I agree with both of you that this should not be used in a production implementation of a build which is why I recommend Vimeo Pro. It may be useful for demoing an idea quickly however in a private environment. – Oloroso

Answer 3

The solution I found aesthetically most pleasing is to lay a high res thumbnail over the video and hide it at hover. This also deals with the problem that the youtube preview is low res and looks cheap in my opinion.

Check it out here: http://jsfiddle.net/d9D9E/1/

Had to write code in order to show the js fiddle :/

.video-thumbnail{
    z-index:300;
    position:absolute;
    top:0;
    left:0;
    width:100%;
}

.video-thumbnail:hover{
    display:none;
}

Son

Not a user friendly solution... after the playback on hover thumbnail shouldn't show... – Klenk

Answer 4

Not having 'rel=0' is irritating, but there is a work around. If you work with the IFrame API, (as opposed to embedding an iframe ex http://youtu.be/?videoIDxxx...) you can get the event for the stopping (completing) of the video, then cue up the video by ID into the player. See https://developers.google.com/youtube/iframe_api_reference#Playback_controls for reference to the basic player.

 
....

<div id="player1"></div>

<script type="text/javascript">
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player ;

function onYouTubeIframeAPIReady()
    {
    player = new YT.Player('player1', 
        { 
        videoId: 'YourVideoId',
        events: {
            'onStateChange': onPlayerStateChange
             }
        });

    }; // onYOuTubeIframeAPIReady
    		
function onPlayerStateChange(event)
    { 
    // Alt approach //if( event.data  == 0){ location.reload()}
    if( event.data  == 0)
        { player.cueVideoById({videoId:'YourVideoID',
                               suggestedQuality: 'hd720'})
        };
    } 

     </script>

Hydrolytic

What would this achieve? You want to start playing without info, event.data == 0 is ended event. – Mauramauralia

Answer 5

I was looking at the same problem and the only solution I found is to set the video in autoplay and place a transparent layer over the youtube box.

The user would not be able to interact with the player, but it can be useful in some situation like banner.

Unfortunately the code doesn't seem to run correctly on stackoverflow I also add a jsfiddle: http://jsfiddle.net/z3dqpuy0/

.yt-cntainer {
  position: relative;
}
		
.yt-mask {
  position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

<div class="yt-cntainer">
  <iframe id="vid-player-1" src="https://www.youtube.com/embed/Bey4XXJAqS8?enablejsapi=1&rel=0&controls=0&showinfo=0&autoplay=1" frameborder="0"></iframe>
  <div class="yt-mask"></div>
</div>

Murrell

This doesn't hide anything, it just blocks the user from interacting with the video, but if the user has slow internet connection they still see the 'watch later' and 'share' buttons, and the channel. This doesn't work at all : ( – Leeanneleeboard

Answer 6

Well, I just noticed it as well. It sucks and ruins the aesthetics. So I just did a

header {
    /* remove when YT got its brain back */
    margin-top: -56px;
}

while hoping that they'll re-add showinfo=0 again.

Imperialism

Using YouTube videos as backgrounds, this worked for me thanks – Bart

I think this goes against the terms of use... Not a perfect solution – Leeanneleeboard

Answer 7

What about this. Yeah this will zoom the video.

iframe {
  transform:scale(1.4);
}

Julio

That is a great answer, however hiding the logos violates YouTube's T&Cs. Not acceptable solution, unless it is a small portfolio website. I am looking for a more of a "showinfo is now back" type of an answer – Leeanneleeboard

Then you can try with Vimeo or self hosted video. Good Luck. – Julio

Answer 8

<div id="schnitt">

<iframe width="500" height="280" src="https://www.youtube.com/embed/rlR4PJn8b8I?controls=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

</div>

<style>
#schnitt {
height:250px;
overflow:hidden;
}

iframe {
margin-top:-55px;
}

Malediction