hide "more videos" within youtube iframe when stop video

Question

How to hide the "more videos" section in Youtube iframes, when the user stops the video?

Example:

<iframe width="750" height="420" src="https://www.youtube/embed/cZnsLVArIt8?rel=0&iv_load_policy=3" frameborder="0" allowfullscreen></iframe>

I cant find any solution here.

Answer 1

I solved this way

1. using a YouTube user with no public videos available
2. uploading an unlisted video
3. added "rel=0" in the src video url of the iframe

See the example below

<iframe src="https://www.youtube.com/embed/HAxjVEiBvCA?rel=0"></iframe>

P.S.: I might delete the video example in future, so just change id video and be sure there are no public visibility video available in the account who generated the iframe

Answer 2

You just need to remove "rel=0" from the Iframe.

Answer 3

If you have uBlock Origin ad-blocker installed, here's the static filter to remove that:

!YouTube embed pause overlay
youtube.com##.ytp-pause-overlay

Answer 4

I'm using Firefox with the Addon uBlock Origin. Click on the logo of uBlock Origin and click on the settings icon, to Open the dashboard.

In the dashboard, go to the tab My filters and add this line:

youtube.com##.ytp-scroll-min.ytp-pause-overlay

Click Apply changes. Now you won't see 'More video's while pausing a Youtube video.

Source of this solution

Answer 5

Reduced test case here: https://codepen.io/jesserosenfield/full/VwZELye

Basically–– delay the pause and play functions using a custom button using setTimeout ... add showing/pausing/playing/paused classes to control CSS transitions of a "placeholder image".

Happy to explain in more detail if you need it, but the code pen should be pretty self explanatory!

Javascript:

        var player,
            $player,
            $playerWrap,
            $playerParent;

          // 3. This function creates an <iframe> (and YouTube player)
          //    after the API code downloads.
          function onYouTubeIframeAPIReady() {
            window.$player = $('#player'),
            window.$playerWrap = $('#player-wrap');
            window.$playerParent = $('#player-parent');

            window.player = new YT.Player('player', {
              height: '100%',
              width: '100%',
              videoId: jQuery('#player').attr('data-yt'),
              host: 'http://www.youtube.com',
              playerVars: {
                'enablejsapi' : 1,
                'playsinline': 1,
                'autoplay': 0,
                'controls': 0,
                'rel' : 0,
                'showinfo' : 0,
                'showsearch' : 0,
                'mute' : 1,
                'modestbranding' : 1,
                'disablekb' : 1,
                'loop' : 1,
                'origin': window.location.href
              },
              events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
              }
            });
          }

          function playClasses($el) {
                $el.addClass('playing').removeClass('paused showing');
          };

          function pauseClasses($el) {
                $el.removeClass('playing pausing').addClass('paused');
          };

          // 4. The API will call this function when the video player is ready.
          function onPlayerReady(event) {

            (function($) {
                window.$playerWrap = $('#player-wrap');
                window.$playerParent = $('#player-parent');
                window.$playerWrap.on('click', function(){

                    var player = window.player,
                        $me = $(this);


                    if (player.getPlayerState() == 1) {
                        window.$playerParent.removeClass('playing').addClass('pausing');

                        setTimeout(function(){
                            player.pauseVideo();                
                        }, 350);
                    } else {
                        window.$playerParent.addClass('showing');
                        player.playVideo();             
                    }
                });
            })(jQuery);
          };



          // 5. The API calls this function when the player's state changes.
          //    The function indicates that when playing a video (state=1),
          //    the player should play for six seconds and then stop.
          var done = false;

          function onPlayerStateChange(event) {

            var thedata = event.data;
            //Ended
            if (thedata === 0) {
                window.player.playVideo(); 
                window.player.seekTo(1); 
            }

            // Playing
            if (thedata === 1) {
                setTimeout(function(){
                    playClasses(window.$playerParent);      
                }, 450);
            }

            // Paused
            if(thedata === 2) {
                pauseClasses(window.$playerParent);
            }
          }

HTML

        <div id="player-parent">
          <div id="player-wrap" class="pr">
            <div class="player-ph--color">&nbsp;</div>
            <div class="player-ph"></div>

            <div id="player" data-yt="CjB_oVeq8Lo"></div>
          </div>
        </div>

        <script>
          // 2. This code loads the IFrame Player API code asynchronously.
          var tag = document.createElement('script');

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

CSS (LESS)

        .player-ph{
          width: 50%;
          height: 100%;
          position: relative;
          background: url(https://images.unsplash.com/photo-1503714964235-8954a5249c00?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80);
          background-size: cover;
             mix-blend-mode: multiply;
            filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
            filter: gray; /* IE6-9 */
            -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */;
        }

        #player-wrap {
            cursor: pointer;
            width: 100%;
            padding-bottom: 56.25%;
          position: relative;
        }

        .player-ph,
        .player-ph--color,
        #player {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
        }

        #player {
          z-index: 5;
          pointer-events: none;
          opacity: 0
        }

        .player-ph--color {
          background: red;
        }

        .player-ph--color:after {
            content: "▶️";
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                height: 300px;
            font-size: 150px;
            color: #fff;
                opacity: .5;
                display: block;
                z-index: 2 
          }

        #player {
          transition: opacity .325s ease-out;
        }

        .player-ph--color:after {
          transition: opacity 1s ease-out;
        }

        #player-parent {
            &.pausing,
            &.paused {
                #player {
                    opacity: 0  
                }
            }

          &.playing,
            &.showing {
            .player-ph--color:after {
              opacity: 0
            }
            }

            &.playing #player {
                opacity: 1
            }
        }

Answer 6

As per https://developers.google.com/youtube/player_parameters#release_notes_08_23_2018

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.

It seems that it is youtubes intention to not give the ability to disable related videos functionality.

jquery way seems to not work either due to CORS, as would be css I guess.

$(".media-youtube-player").contents().find(".ytp-pause-overlay").remove();

causing blocked a frame with origin "xxx" from accessing a cross-origin frame.

Not sure if there is a way doing this, unless youtube allows it again. Want to disable this too so any help is appreciated.