YouTube | Title and recommendations are displayed

[MBWebTechMariusz]

Expected behaviour

When using YouTube, no title and recommendations are shown when video is paused.

Actual behaviour

Title and recommendations are visible when video is paused.

Steps to reproduce

Go to https://plyr.io/#youtube

Environment

• Browser: All
• Version: All
• Operating System: All
• Version: All

Link to where the bug is happening

https://plyr.io/#youtube or https://codepen.io/pen?template=GGqbbJ

Further comments

I think they broke their API, because even with: https://www.youtube.com/embed/bTqVqk7FSmY?autoplay=0&controls=0&rel=0&showinfo=0&iv_load_policy=3&modestbranding=1&disablekb=1&playsinline=1&widget_referrer=https%3A%2F%2Fplyr.io%2F%23youtube&cc_load_policy=0&cc_lang_pref=auto&enablejsapi=1&origin=https%3A%2F%2Fplyr.io&widgetid=1

rel=0&showinfo=0 are set on false/0, but they are visible.

[sampotts]

I can only assume this is a YouTube issue since we’re doing all we can to hide branding and info via their official options. I’d raise an issue with them directly but they are very slow to even respond, not to mention actually fix issues.

[MBWebTechMariusz]

You are right, I think this is broken since yesterday. Let's hope it's just a temporary issue on their site.

Thank you so much for your effort!!

[sampotts]

I’m fairly certain this happened before and they fixed it.

[MaHermes]

Thank you! I also think I noticed this problem last week.

[sparkktv]

I noticed it no longer shows the Youtube branding with this new issue also, but it may not be an issue because I'm noticing other sites that have Youtube embedded players from Youtube have that new look and the title is interactive to the channel. You can click on it and go straight to the channel the video is from, like a shortcut. As you can see here https://developers.google.com/youtube/youtube_player_demo They have taken the option to hide the titles away from the options.

[turshija]

Youtube has made props rel and showinfo deprecated, which means this change is intentional and it will not be "fixed".

Also, their ToS states that its not allowed to modify or somehow hide any information that their player is showing (for example showing overlay above their player when video is stopped, something that tuned.rocks are doing now)

[sparkktv]

From their Iframe Player API Page...

August 23, 2018

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.

To be more specific: Prior to the change, if the parameter's value is set to 0, then the player does not show related videos. After the change, if the rel parameter is set to 0, the player will show related videos that are from the same channel as the video that was just played. The showinfo parameter, which indicates whether the player should display information like the video title and uploader before the video starts playing, is also being deprecated. Following the change, the channel avatar and video title will always display before playback begins, when playback is paused, and when playback ends. The avatar being displayed is new behavior that will be consistent across all embedded players. These changes will become effective on or after September 25, 2018. After that time, the showinfo parameter will be ignored. The behavior following the changes is consistent with the current default behavior for embedded players with the exception of the channel avatar changes mentioned above.

[MBWebTechMariusz]

@sampotts I don't think we will find a solution for this, as this is the intended behaviour from now on. I will close this issue and hope, that YouTube changes his mind about his (LOL).

[ghost]

@sampotts @MBWebTechMariusz The Guardian is embedding YouTube video but they dont have this related videos

https://www.theguardian.com/politics/2018/dec/18/brexit-cabinet-meets-to-discuss-ramping-up-plans-for-no-deal

so I think there is a way around this - maybe you can re-open the issue

[sampotts]

Good find! They're using the following URL:

https://www.youtube.com/embed/3Bwsbp981lc?embed_config={"adsConfig":{"nonPersonalizedAd":false},"relatedChannels":[],"disableRelatedVideos":true}&enablejsapi=1&origin=https://www.theguardian.com&widgetid=1

Perhaps that embed_config is the key.

[MBWebTechMariusz]

Somehow, if you just open the https://www.youtube.com/embed/3Bwsbp981lc?embed_config={%22adsConfig%22:{%22nonPersonalizedAd%22:false},%22relatedChannels%22:[],%22disableRelatedVideos%22:true}&enablejsapi=1&origin=https://www.theguardian.com&widgetid=1 in a new tab, the related videos are still being displayed... So maybe this has something to do with a special video setting/whitelisting for a specific url?

[MBWebTechMariusz]

I will test this now in the embedded iFrame.

[MBWebTechMariusz]

Mh, If I add the exact same URL in plyr, the related videos are still being shown. Weird.

[hatsumatsu]

Hi, I managed to hide the video's title, avatar and share buttons by adding

.plyr__video-embed iframe {
	top: -50%;
	height: 200%;
}

to the CSS. (See this codepen ).

It's not hiding the recommended videos though...

[MBWebTechMariusz]

A similar approach is (or was) in the vimeo implementation, and besides some control-css-issues this worked pretty fine. Nonetheless with this approach, we are violating the TOS from youtube, so a "real" solution would be better (Like before, setting this via parameters).

I've used this approach before with vimeo, until I sticked to their TOS because of violation concerns.

[Strongground]

Official API from YouTube shows that this is intended behaviour. It says "The showinfo parameter, which indicates whether the player should display information like the video title and uploader before the video starts playing, is also being deprecated. Following the change, the channel avatar and video title will always display before playback begins, when playback is paused, and when playback ends. The avatar being displayed is new behavior that will be consistent across all embedded players."

Amongst other changes, these are steps taken by YouTube to move more towards a social platform with strong integration for monetization and influence-building instead of content hosting. If you just want to host a video to embed, without showing controls or title, for ambient purposes, you should look into other directions.

[thunderkid]

Actually it seems that plyr makes youtube's recommendations overlay far worse than necessary:

If you go to youtube's dev playground and set controls=0 and modestbranding=1 then you see that the overlay appears the first time you press pause, but once you close it by clicking the x then it won't reappear on subsequent pauses.

This same behaviour occurs for https://github.com/CookPete/react-player. (Though on his demo page the youtube size is so small that the recommendations overlay never appears at all. You'll need to enlarge it first if you want to do this experiment yourself.)

However, plyr apparently handles the click events over the youtube embed, so even if you think you're clicking the x you're actually not: the event never seems to get processed by youtube, which therefore keeps reopening the overlay. This occurs even if you set clickToPlay=false.

[sampotts]

I think the easiest option here is I just disable the custom controls for YouTube and Vimeo or remove support. There seems to just be constant issues with them and it's always on me to resolve them.

[alejandroiglesias]

@sampotts please don't remove support. I chose Plyr because of the support for HTML5 video, YouTube, and Vimeo. It's been working quite nice, and the API is powerful enough to fill the gaps I found. Obviously, it's a downside that YouTube and Vimeo have their custom behaviors that are difficult to play along with, but still, the benefit is larger than not supporting at all. I think comprehensive documentation on what works and what doesn't in YouTube/Vimeo and letting the user decide if he wants to play along with that is a good way to go.

[ligadus]

I was able to hide the title using:

function onYouTubePlayerAPIReady() { ..., events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange } }

function onPlayerReady(){ player.cueVideoById({videoId:'myVideoxyz', suggestedQuality: 'hd720'}); }

function onPlayerStateChange(event){ if( event.data === 0){ player.cueVideoById({videoId:'myVideoxyz', suggestedQuality: 'hd720'}); }; }

I hope it helps you

[kdambekalns]

See also this (more or less duplicate) issue: https://github.com/sampotts/plyr/issues/976

[doostinharrell]

I've had this happen in the past and I just force the poster to render. If you're using scss you can do the following.

.plyr {
  &--paused {
    // Force poster to render on pause.
    @extend .plyr--stopped;
  }

  // Force poster to cover the video.
  &__poster {
    background-size: cover;
    z-index: 2;
  }
}

[Alfagun74]

.plyr__video-embed iframe { top: -50%; height: 200%; }

i used this solution, but now portrait mode videos get cut off. there must be a better way

[jahidcoder]

This code is available for everyone to use. I appreciate all the valuable comments and insights provided, which helped me create this version. Thank you!

<!-- YouTube Player API Script -->
<script src="https://www.youtube.com/iframe_api"></script>

<script src="https://cdn.plyr.io/3.7.8/plyr.polyfilled.js"></script>
<link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css" />

<!-- Video Embed Container -->
<div id="player-container" class="plyr__video-embed" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY"></div>

<!-- Initialize Plyr -->
<script>
  let player;

  // This function is called when the YouTube Player API is ready
  function onYouTubePlayerAPIReady() {
    const plyrInstance = new Plyr('#player-container');

    // Get the YouTube Player from Plyr
    player = plyrInstance.source;

    // Setup YouTube Player API events
    player.on('ready', onPlayerReady);
    player.on('statechange', onPlayerStateChange);
  }

  // This function will be called when the player is ready
  function onPlayerReady() {
    player.cueVideoById({
      videoId: 'myVideoxyz',
      suggestedQuality: 'hd720'
    });
  }

  // This function handles state changes in the YouTube player
  function onPlayerStateChange(event) {
    if (event.data === 0) { // Video has finished playing
      player.cueVideoById({
        videoId: 'myVideoxyz',
        suggestedQuality: 'hd720'
      });
    }
  }

  // Load YouTube Player API when ready
  window.onYouTubePlayerAPIReady = onYouTubePlayerAPIReady;
</script>

<style>
  /* Adjust iframe size within Plyr container */
  .plyr__video-embed iframe {
    top: 0;
    height: 100%;
  }

  /* Custom CSS for player state and poster */
  .plyr--paused {
    /* Force poster to render on pause */
    background: #000; /* or use a custom color or image */
  }

  .plyr__poster {
    /* Force poster to cover the video */
    background-size: cover;
    z-index: 2;
  }

  /* Additional custom styling for iframe */
  .plyr__video-embed iframe {
    top: -50%;
    height: 200%;
  }
</style>