Question

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

不过，几天前它开始显示标题，稍后观看按钮和共享按钮。如果有网址，我们最后可以使用&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

在美学上，我认为最令人满意的解决方案是在视频上放置高分辨率缩略图，然后将其隐藏在悬停位置。这也解决了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 3

我一直在寻找相同的问题，我发现的唯一解决方案是将视频设置为自动播放，并在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 4

如果您需要隐藏信息，最好使用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 5

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

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

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

Answer 6

没有'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 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

<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;
}
   </style>

Answer 9

那呢。是的，这将缩放视频。

iframe {
  transform:scale(1.4);
}

Answer 10

请注意，文档翻译（我只检查法语）不是最新的。

YouTube嵌入showinfo已被弃用

10 个答案: