Question

当用户停止视频时，如何在YouTube iframe中隐藏“更多视频”部分？

示例：

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

我在这里找不到任何解决方案：https://developers.google.com/youtube/player_parameters

Answer 1

按照https://developers.google.com/youtube/player_parameters#release_notes_08_23_2018

rel参数的行为在9月或之后改变   2018年2月25日。更改的结果是您将无法   禁用相关视频。但是，您可以选择   指定播放器中显示的相关视频应来自   与刚刚播放的视频相同的频道。

更具体：在更改之前，如果参数的值为   设置为0，则播放器不会显示相关视频。之后   更改，如果rel参数设置为0，则播放器将显示相关   来自同一频道的视频   玩过。

似乎YouTube用户打算不提供禁用相关视频功能的功能。

由于CORS，jQuery方式似乎也不起作用，就像我猜的CSS一样。

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

导致阻止了起源为“ xxx”的框架访问跨域框架。

不确定是否有办法做到这一点，除非youtube再次允许。也要禁用此功能，以感谢您的帮助。

Answer 2

我正在将Firefox与Addon uBlock Origin一起使用。单击uBlock Origin的徽标，然后单击设置图标，以Open the dashboard。

在信息中心中，转到标签My filters并添加以下行：

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

点击Apply changes。现在，暂停YouTube视频时，您将看不到“更多视频”。

Source of this solution

Answer 3

uBlock规则：

!Youtube embed pause overlay
www.youtube.com##.ytp-pause-overlay

Answer 4

您只需要一行CSS代码。它不是删除“更多视频”部分，而是从您的视图中隐藏该部分。

.ytp-pause-overlay
 {
    bottom:-200px; //give !important if not working
 }

Answer 5

在这里减少测试用例： https://codepen.io/jesserosenfield/full/VwZELye

基本上-使用setTimeout使用自定义按钮来延迟暂停和播放功能...添加显示/暂停/播放/暂停的类以控制“占位符图像”的CSS过渡。

乐于在需要时更详细地进行解释，但是代码笔应该很容易解释！

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,&lt;svg xmlns=\'http://www.w3.org/2000/svg\'&gt;&lt;filter id=\'grayscale\'&gt;&lt;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\'/&gt;&lt;/filter&gt;&lt;/svg&gt;#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
            }
        }

停止视频时在youtube iframe中隐藏“更多视频”

5 个答案: