YouTube 嵌入 showinfo 已被弃用

Question

我们在我们的网站上使用 YouTube 视频作为英雄横幅。

但几天前它开始显示标题、稍后观看按钮和分享按钮。如果 URL 结束，我们可以使用 &showinfo=0 隐藏它们。

我发现了showinfo has been deprecated，因此您无法再隐瞒它是在那里显示的 YouTube 视频的事实。

还有其他参数可以做同样的事情吗？

你不能用 CSS 或 JavaScript 来做，因为它是一个iframe。

非常感谢任何想法。

更新：

视频上的任何图层或蒙版都无济于事，因为信息会在视频加载时显示，或者如果您在浏览器外部点击，视频将暂停并显示信息。

隐藏顶部 ~60px 可以，但对我来说不是一个好的解决方案。

Answer 1

直接来自show info

注意：这是 showinfo 参数的弃用公告。此外，rel 参数的行为正在发生变化。标题、频道信息和相关视频是 YouTube 核心用户体验的重要组成部分，这些变化有助于使不同平台的 YouTube 观看体验保持一致。

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

它清楚地表明这是他们认为是 cor youtube 体验的一部分。没有建议您可以发送以存档旧结果的解决方法或新参数。他们正在删除它。如果您尝试使用 javascript 和 css 强制它退出，我几乎会建议您反对 TOC，它声明您不允许更改该显示。人们应该知道您正在展示来自 YouTube 的内容

Answer 2

嗯，我也注意到了。它糟透了并破坏了美学。所以我只是做了一个

header {
    /* remove when YT got its brain back */
    margin-top: -56px;
}

同时希望他们会再次重新添加showinfo=0。

Answer 3

我发现最美观的解决方案是在视频上放置一个高分辨率缩略图并在悬停时将其隐藏。这也解决了 youtube 预览分辨率低且在我看来很便宜的问题。

在这里查看： http://jsfiddle.net/d9D9E/1/

必须编写代码才能显示 js 小提琴：/

.video-thumbnail{
    z-index:300;
    position:absolute;
    top:0;
    left:0;
    width:100%;
}

.video-thumbnail:hover{
    display:none;
}

Answer 4

我正在寻找同样的问题，我发现的唯一解决方案是将视频设置为自动播放并在 youtube 框上放置一个透明层。

用户将无法与播放器交互，但它在某些情况下（例如横幅）很有用。

不幸的是，代码似乎无法在 stackoverflow 上正确运行，我还添加了一个 jsfiddle：http://jsfiddle.net/z3dqpuy0/

.yt-cntainer {
  position: relative;
}
		
.yt-mask {
  position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

<div class="yt-cntainer">
  <iframe id="vid-player-1" src="https://www.youtube.com/embed/Bey4XXJAqS8?enablejsapi=1&rel=0&controls=0&showinfo=0&autoplay=1" frameborder="0"></iframe>
  <div class="yt-mask"></div>
</div>

Answer 5

没有 'rel=0' 很烦人，但有一个变通方法。如果您使用 IFrame API，（而不是嵌入 iframe ex http://youtu.be/?videoIDxxx..。）您可以获得视频停止（完成）的事件，然后通过 ID 将视频提示到播放器中。基本播放器参考https://developers.google.com/youtube/iframe_api_reference#Playback_controls。

 
....

<div id="player1"></div>

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

var player ;

function onYouTubeIframeAPIReady()
    {
    player = new YT.Player('player1', 
        { 
        videoId: 'YourVideoId',
        events: {
            'onStateChange': onPlayerStateChange
             }
        });

    }; // onYOuTubeIframeAPIReady
    		
function onPlayerStateChange(event)
    { 
    // Alt approach //if( event.data  == 0){ location.reload()}
    if( event.data  == 0)
        { player.cueVideoById({videoId:'YourVideoID',
                               suggestedQuality: 'hd720'})
        };
    } 

     </script>

Answer 6

如果您需要隐藏信息，最好选择 Vimeo pro（它正确支持无信息嵌入），

否则有一个简单的解决方法：

https://jsfiddle.net/10ov5hgw/1/

它切断了 iframe 的底部和顶部 60 像素，但通过溢出而不是顶部的粗看黑条，因此视频在整个过程中仍然看起来全屏（如果你强制 720，几乎没有任何视频被剪切） ,

此 hack 还支持必须支持移动视图，而不会严重影响视频的可见区域。

.video-container{
  width:100vw;
  height:100vh;
  overflow:hidden;
  position:relative;
}
.video-container iframe,{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.video-container iframe, {
  pointer-events: none;
}
.video-container iframe{
  position: absolute;
  top: -60px;
  left: 0;
  width: 100%;
  height: calc(100% + 120px);
}
.video-foreground{
  pointer-events:none;
}

<div class="video-container" >
    <div class="video-foreground">
        <iframe
               src="https://www.youtube.com/embed/W0LHTWG-UmQ?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&playlist=W0LHTWG-UmQ&mute=1"
               frameBorder="0" allowFullScreen>

        </iframe>
    </div>             
</div>                                        

Answer 7

<div id="schnitt">

<iframe width="500" height="280" src="https://www.youtube.com/embed/rlR4PJn8b8I?controls=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

</div>

<style>
#schnitt {
height:250px;
overflow:hidden;
}

iframe {
margin-top:-55px;
}

Answer 8

这个呢。是的，这将放大视频。

iframe {
  transform:scale(1.4);
}