hide “more videos” within youtube iframe when stop video

后端未结
关注
 5  1751
How to hide the \"more videos\" section in Youtube iframes, when the user stops the video?
Example:
</script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-5408099190056760"
     data-ad-slot="7305827575"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>        </div>
                      <div class="relativetags">
              相关标签:
       </div>
      </div>
      
      <div class="fly-panel detail-box" id="flyReply">
        <fieldset class="layui-elem-field layui-field-title" style="text-align: center;">
          <legend>5条回答</legend>        </fieldset>

        <ul class="jieda" id="jieda">
                         				            <li data-id="111">
            <a name="item-1111111111"></a>
           
            <div class="detail-about detail-about-reply">
                              <a class="fly-avatar" href="https://www.e-learn.cn/qa/u-123.html">
                <img src="https://www.e-learn.cn/qa/data/avatar/000/00/01/small_000000123.jpg" alt=" ">
              </a>
              <div class="fly-detail-user">
                <a href="https://www.e-learn.cn/qa/u-123.html" class="fly-link">
                  <cite>不知归路 </cite>       
                </a>
              </div>
                            <div class="detail-hits">
                <span>2021-01-01 17:02</span>
              </div>
            </div>
            <div class="detail-body jieda-body photos">
                                                                       
<p>I'm using Firefox with the Addon uBlock Origin.
Click on the logo of uBlock Origin and click on the settings icon, to <code>Open the dashboard</code>.</p>

<p>In the dashboard, go to the tab <code>My filters</code> and add this line:</p>

<pre><code>youtube.com##.ytp-scroll-min.ytp-pause-overlay
</code></pre>

<p>Click <code>Apply changes</code>.
Now you won't see 'More video's while pausing a Youtube video.</p>

<p>Source of this solution</p>
                                                                        <div class="appendcontent">
                                                        </div>
            </div>
            <div class="jieda-reply">
              <span class="jieda-zan button_agree" type="zan" data-id='1547635'>
                <i class="iconfont icon-zan"></i>
                <em>0</em>
              </span>
                 <span type="reply" class="showpinglun" data-id="1547635">
                <i class="iconfont icon-svgmoban53"></i>
               讨论(0)
              </span>
              
                                                   
              <div class="jieda-admin">
                                                            </div>
            </div>
                      <div class="comments-mod "  style="display: none; float:none;padding-top:10px;" id="comment_1547635">
                    <div class="areabox clearfix">

<form class="layui-form" action="">
               
            <div class="layui-form-item">
    <label class="layui-form-label" style="padding-left:0px;width:60px;">发布评论:</label>
    <div class="layui-input-block" style="margin-left:90px;">
         <input type="text" placeholder="不少于5个字" AUTOCOMPLETE="off" class="comment-input layui-input" name="content" />
                        <input type='hidden' value='0' name='replyauthor' />
    </div>
    <div class="mar-t10"><span class="fr layui-btn layui-btn-sm addhuidapinglun" data-id="1547635">提交评论 </span></div>
  </div>
  
</form>
                    </div>
                    <hr>
                    <ul class="my-comments-list nav">
                        <li class="loading">
                        <img src='https://www.e-learn.cn/qa/static/css/default/loading.gif' align='absmiddle' />
                        &nbsp;加载中...
                        </li>
                    </ul>
                </div>
          </li>
          	          <li data-id="111">
            <a name="item-1111111111"></a>
           
            <div class="detail-about detail-about-reply">
                              <a class="fly-avatar" href="https://www.e-learn.cn/qa/u-101.html">
                <img src="https://www.e-learn.cn/qa/data/avatar/000/00/01/small_000000101.jpg" alt=" ">
              </a>
              <div class="fly-detail-user">
                <a href="https://www.e-learn.cn/qa/u-101.html" class="fly-link">
                  <cite>醉梦人生 </cite>       
                </a>
              </div>
                            <div class="detail-hits">
                <span>2021-01-01 17:07</span>
              </div>
            </div>
            <div class="detail-body jieda-body photos">
                                                                       
<p>Reduced test case here:
https://codepen.io/jesserosenfield/full/VwZELye</p>

<p>Basically&ndash;&ndash;&nbsp;delay the pause and play functions using a custom button using <code>setTimeout</code> ... add showing/pausing/playing/paused classes to control CSS transitions of a "placeholder image".</p>

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

<p><strong>Javascript:</strong></p>

<pre><code>        var player,
            $player,
            $playerWrap,
            $playerParent;

          // 3. This function creates an &lt;iframe&gt; (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);
            }
          }
</code></pre>

<p><strong>HTML</strong></p>

<pre><code>        &lt;div id="player-parent"&gt;
          &lt;div id="player-wrap" class="pr"&gt;
            &lt;div class="player-ph--color"&gt;&amp;nbsp;&lt;/div&gt;
            &lt;div class="player-ph"&gt;&lt;/div&gt;

            &lt;div id="player" data-yt="CjB_oVeq8Lo"&gt;&lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;

        &lt;script&gt;
          // 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);
        &lt;/script&gt;
</code></pre>

<p><strong>CSS (LESS)</strong></p>

<pre><code>        .player-ph{
          width: 50%;
          height: 100%;
          position: relative;
          background: url(https://images.unsplash.com/photo-1503714964235-8954a5249c00?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1500&amp;q=80);
          background-size: cover;
             mix-blend-mode: multiply;
            filter: url("data:image/svg+xml;utf8,&amp;lt;svg xmlns=\'http://www.w3.org/2000/svg\'&amp;gt;&amp;lt;filter id=\'grayscale\'&amp;gt;&amp;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\'/&amp;gt;&amp;lt;/filter&amp;gt;&amp;lt;/svg&amp;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 {
            &amp;.pausing,
            &amp;.paused {
                #player {
                    opacity: 0  
                }
            }

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

            &amp;.playing #player {
                opacity: 1
            }
        }
</code></pre>
                                                                        <div class="appendcontent">
                                                        </div>
            </div>
            <div class="jieda-reply">
              <span class="jieda-zan button_agree" type="zan" data-id='1547636'>
                <i class="iconfont icon-zan"></i>
                <em>0</em>
              </span>
                 <span type="reply" class="showpinglun" data-id="1547636">
                <i class="iconfont icon-svgmoban53"></i>
               讨论(0)
              </span>
              
                                                   
              <div class="jieda-admin">
                                                            </div>
            </div>
                      <div class="comments-mod "  style="display: none; float:none;padding-top:10px;" id="comment_1547636">
                    <div class="areabox clearfix">

<form class="layui-form" action="">
               
            <div class="layui-form-item">
    <label class="layui-form-label" style="padding-left:0px;width:60px;">发布评论:</label>
    <div class="layui-input-block" style="margin-left:90px;">
         <input type="text" placeholder="不少于5个字" AUTOCOMPLETE="off" class="comment-input layui-input" name="content" />
                        <input type='hidden' value='0' name='replyauthor' />
    </div>
    <div class="mar-t10"><span class="fr layui-btn layui-btn-sm addhuidapinglun" data-id="1547636">提交评论 </span></div>
  </div>
  
</form>
                    </div>
                    <hr>
                    <ul class="my-comments-list nav">
                        <li class="loading">
                        <img src='https://www.e-learn.cn/qa/static/css/default/loading.gif' align='absmiddle' />
                        &nbsp;加载中...
                        </li>
                    </ul>
                </div>
          </li>
          	          <li data-id="111">
            <a name="item-1111111111"></a>
           
            <div class="detail-about detail-about-reply">
                              <a class="fly-avatar" href="https://www.e-learn.cn/qa/u-134.html">
                <img src="https://www.e-learn.cn/qa/data/avatar/000/00/01/small_000000134.jpg" alt=" ">
              </a>
              <div class="fly-detail-user">
                <a href="https://www.e-learn.cn/qa/u-134.html" class="fly-link">
                  <cite>青春惊慌失措 </cite>       
                </a>
              </div>
                            <div class="detail-hits">
                <span>2021-01-01 17:12</span>
              </div>
            </div>
            <div class="detail-body jieda-body photos">
                                                                       
<p>uBlock Rule:</p>

<pre><code>!Youtube embed pause overlay
www.youtube.com##.ytp-pause-overlay
</code></pre>
                                                                        <div class="appendcontent">
                                                        </div>
            </div>
            <div class="jieda-reply">
              <span class="jieda-zan button_agree" type="zan" data-id='1547634'>
                <i class="iconfont icon-zan"></i>
                <em>0</em>
              </span>
                 <span type="reply" class="showpinglun" data-id="1547634">
                <i class="iconfont icon-svgmoban53"></i>
               讨论(0)
              </span>
              
                                                   
              <div class="jieda-admin">
                                                            </div>
            </div>
                      <div class="comments-mod "  style="display: none; float:none;padding-top:10px;" id="comment_1547634">
                    <div class="areabox clearfix">

<form class="layui-form" action="">
               
            <div class="layui-form-item">
    <label class="layui-form-label" style="padding-left:0px;width:60px;">发布评论:</label>
    <div class="layui-input-block" style="margin-left:90px;">
         <input type="text" placeholder="不少于5个字" AUTOCOMPLETE="off" class="comment-input layui-input" name="content" />
                        <input type='hidden' value='0' name='replyauthor' />
    </div>
    <div class="mar-t10"><span class="fr layui-btn layui-btn-sm addhuidapinglun" data-id="1547634">提交评论 </span></div>
  </div>
  
</form>
                    </div>
                    <hr>
                    <ul class="my-comments-list nav">
                        <li class="loading">
                        <img src='https://www.e-learn.cn/qa/static/css/default/loading.gif' align='absmiddle' />
                        &nbsp;加载中...
                        </li>
                    </ul>
                </div>
          </li>
          	          <li data-id="111">
            <a name="item-1111111111"></a>
           
            <div class="detail-about detail-about-reply">
                              <a class="fly-avatar" href="https://www.e-learn.cn/qa/u-34.html">
                <img src="https://www.e-learn.cn/qa/data/avatar/000/00/00/small_000000034.jpg" alt=" ">
              </a>
              <div class="fly-detail-user">
                <a href="https://www.e-learn.cn/qa/u-34.html" class="fly-link">
                  <cite>你的背包 </cite>       
                </a>
              </div>
                            <div class="detail-hits">
                <span>2021-01-01 17:16</span>
              </div>
            </div>
            <div class="detail-body jieda-body photos">
                                                                       
<p>You just need a line of CSS code. It's not removing the "more videos" section but hiding the section from your view.</p>

<pre><code>.ytp-pause-overlay
 {
    bottom:-200px; //give !important if not working
 }
</code></pre>
                                                                        <div class="appendcontent">
                                                        </div>
            </div>
            <div class="jieda-reply">
              <span class="jieda-zan button_agree" type="zan" data-id='1547637'>
                <i class="iconfont icon-zan"></i>
                <em>0</em>
              </span>
                 <span type="reply" class="showpinglun" data-id="1547637">
                <i class="iconfont icon-svgmoban53"></i>
               讨论(0)
              </span>
              
                                                   
              <div class="jieda-admin">
                                                            </div>
            </div>
                      <div class="comments-mod "  style="display: none; float:none;padding-top:10px;" id="comment_1547637">
                    <div class="areabox clearfix">

<form class="layui-form" action="">
               
            <div class="layui-form-item">
    <label class="layui-form-label" style="padding-left:0px;width:60px;">发布评论:</label>
    <div class="layui-input-block" style="margin-left:90px;">
         <input type="text" placeholder="不少于5个字" AUTOCOMPLETE="off" class="comment-input layui-input" name="content" />
                        <input type='hidden' value='0' name='replyauthor' />
    </div>
    <div class="mar-t10"><span class="fr layui-btn layui-btn-sm addhuidapinglun" data-id="1547637">提交评论 </span></div>
  </div>
  
</form>
                    </div>
                    <hr>
                    <ul class="my-comments-list nav">
                        <li class="loading">
                        <img src='https://www.e-learn.cn/qa/static/css/default/loading.gif' align='absmiddle' />
                        &nbsp;加载中...
                        </li>
                    </ul>
                </div>
          </li>
          	          <li data-id="111">
            <a name="item-1111111111"></a>
           
            <div class="detail-about detail-about-reply">
                              <a class="fly-avatar" href="https://www.e-learn.cn/qa/u-38.html">
                <img src="https://www.e-learn.cn/qa/data/avatar/000/00/00/small_000000038.jpg" alt=" ">
              </a>
              <div class="fly-detail-user">
                <a href="https://www.e-learn.cn/qa/u-38.html" class="fly-link">
                  <cite>我寻月下人不归 </cite>       
                </a>
              </div>
                            <div class="detail-hits">
                <span>2021-01-01 17:18</span>
              </div>
            </div>
            <div class="detail-body jieda-body photos">
                                                                       
<p>As per https://developers.google.com/youtube/player_parameters#release_notes_08_23_2018</p>

<blockquote>
  <p>The behavior for the rel parameter is changing on or after September
  25, 2018. The effect of the change is that <strong>you will not be able to
  disable related videos</strong>. 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.</p>
  
  <p>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.</p>
</blockquote>

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

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

<pre><code>$(".media-youtube-player").contents().find(".ytp-pause-overlay").remove();
</code></pre>

<p>causing blocked a frame with origin "xxx" from accessing a cross-origin frame.</p>

<p>Not sure if there is a way doing this, unless youtube allows it again. Want to disable this too so any help is appreciated.</p>
                                                                        <div class="appendcontent">
                                                        </div>
            </div>
            <div class="jieda-reply">
              <span class="jieda-zan button_agree" type="zan" data-id='1547633'>
                <i class="iconfont icon-zan"></i>
                <em>0</em>
              </span>
                 <span type="reply" class="showpinglun" data-id="1547633">
                <i class="iconfont icon-svgmoban53"></i>
               讨论(0)
              </span>
              
                                                   
              <div class="jieda-admin">
                                                            </div>
            </div>
                      <div class="comments-mod "  style="display: none; float:none;padding-top:10px;" id="comment_1547633">
                    <div class="areabox clearfix">

<form class="layui-form" action="">
               
            <div class="layui-form-item">
    <label class="layui-form-label" style="padding-left:0px;width:60px;">发布评论:</label>
    <div class="layui-input-block" style="margin-left:90px;">
         <input type="text" placeholder="不少于5个字" AUTOCOMPLETE="off" class="comment-input layui-input" name="content" />
                        <input type='hidden' value='0' name='replyauthor' />
    </div>
    <div class="mar-t10"><span class="fr layui-btn layui-btn-sm addhuidapinglun" data-id="1547633">提交评论 </span></div>
  </div>
  
</form>
                    </div>
                    <hr>
                    <ul class="my-comments-list nav">
                        <li class="loading">
                        <img src='https://www.e-learn.cn/qa/static/css/default/loading.gif' align='absmiddle' />
                        &nbsp;加载中...
                        </li>
                    </ul>
                </div>
          </li>
          	          
           <style>
   
.laypage-main a, .laypage-main span {
    display: inline-block;
}
        </style>                  </ul>
        
        <div class="layui-form layui-form-pane">
          <form id="huidaform"  name="answerForm"  method="post">
            
            <div class="layui-form-item layui-form-text">
              <a name="comment"></a>
              <div class="layui-input-block">
            
    
<script type="text/javascript" src="https://www.e-learn.cn/qa/static/js/neweditor/ueditor.config.js"></script>
<script type="text/javascript" src="https://www.e-learn.cn/qa/static/js/neweditor/ueditor.all.js"></script>
<script type="text/plain" id="editor"  name="content"  style="width:100%;height:200px;"></script>                                 
<script type="text/javascript">
                                 var isueditor=1;
            var editor = UE.getEditor('editor',{
                //这里可以选择自己需要的工具按钮名称,此处仅选择如下五个
                toolbars:[['source','fullscreen',  '|', 'undo', 'redo', '|', 'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|', 'rowspacingtop', 'rowspacingbottom', 'lineheight', '|', 'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|', 'indent', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'link', 'unlink', 'anchor', '|', 'simpleupload', 'insertimage', 'scrawl', 'insertvideo', 'attachment', 'map', 'insertcode', '|', 'horizontal', '|', 'preview', 'searchreplace', 'drafts']],
            
                initialContent:'',
                //关闭字数统计
                wordCount:false,
                zIndex:2,
                //关闭elementPath
                elementPathEnabled:false,
                //默认的编辑区域高度
                initialFrameHeight:250
                //更多其他参数，请参考ueditor.config.js中的配置项
                //更多其他参数，请参考ueditor.config.js中的配置项
            });
                        editor.ready(function() {
            	editor.setDisabled();
            	});
                            $("#editor").find("*").css("max-width","362px");
        </script>              </div>
            </div>
                          
    

        
         <div class="layui-form-item">
                <label for="L_vercode" class="layui-form-label">验证码</label>
                <div class="layui-input-inline">
                  <input type="text"  id="code" name="code"   value="" required lay-verify="required" placeholder="图片验证码" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid">
                  <span style="color: #c00;"><img class="hand" src="https://www.e-learn.cn/qa/user/code.html" onclick="javascript:updatecode();" id="verifycode"><a class="changecode"  href="javascript:updatecode();">&nbsp;看不清?</a></span>
                </div>
              </div>
                                  <div class="layui-form-item">
                    <input type="hidden" value="607874" id="ans_qid" name="qid">
   <input type="hidden" id="tokenkey" name="tokenkey" value=''/>
                <input type="hidden" value="hide “more videos” within youtube iframe when stop video" id="ans_title" name="title"> 
             
              <div class="layui-btn    layui-btn-disabled"  id="ajaxsubmitasnwer" >提交回复</div>
            </div>
          </form>
        </div>
      </div>
      <input type="hidden" value="607874" id="adopt_qid"	name="qid" /> 
      <input type="hidden" id="adopt_answer" value="0"	name="aid" />
    </div>
    <div class="layui-col-md4">
          
 <!-- 热门讨论问题 -->
     
 <dl class="fly-panel fly-list-one">
        <dt class="fly-panel-title">热议问题</dt>
            <!-- 本周热门讨论问题显示10条-->