Is it possible to only remove the “watch later” and “share” buttons from youtube iframe embed player

后端未结

关注

 8  1218

悲&欢浪女 2021-02-02 09:54

How can I remove the watch later and share buttons from youtube iframe embed player. Using the following embed code for embedding video clips.

</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>
      
      <div class="fly-panel detail-box" id="flyReply">
        <fieldset class="layui-elem-field layui-field-title" style="text-align: center;">
          <legend>8条回答</legend>        </fieldset>

        <ul class="jieda" id="jieda">
                    <li data-id="111" class="jieda-daan">
            <a name="item-1111111111"></a>
            <div class="detail-about detail-about-reply">
                         <a class="fly-avatar" href="">
                <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="" class="fly-link">
                  <cite> 醉梦人生</cite>
                                             
                </a>
                
                <span>(楼主)</span>
            
              </div>              <div class="detail-hits">
                <span>2021-02-02 10:07</span>
              </div>

            </div>
            <div class="detail-body jieda-body photos">
              <p>          
<p>The only way to do it is to create a negative margin at the top of a container which has <code>overflow</code> set to <code>hidden</code>. See my CodePen here.</p>

<p>CSS:</p>

<pre><code>.videoWrapper {
  overflow: hidden;
}
@media (min-width: 1500px) {
  .videoWrapper {
    margin-top: -135px;
  }
}
@media (min-width: 1200px) {
  .videoWrapper {
    margin-top: -75px;
  }
}
</code></pre>

<p>HTML:</p>

<pre><code><div class="videoWrapper">
  <iframe width="100% src="https://www.youtube.com/embed/cPVgwz5aN1o" frameborder="0" allowfullscreen>

But then of course you lose the top of your video. You may also be breaching some of part of YouTube's Terms of Service.

Also, this tends to only work well at browser widths above 1200px. Below this the title and top controls take up a much larger percentage of player real estate, so you would lose too much off the top of your video.

0 讨论(0)

查看其它8个回答