YouTube 嵌入 showinfo 已被弃用

Question

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

但是几天前它开始显示它的标题、稍后观看按钮和分享按钮。如果 URL.

，我们可以在最后使用 &showinfo=0 隐藏它们

我发现 showinfo has been deprecated 因此您无法再隐藏它是一个 YouTube 视频的事实。

是否有任何其他参数可以做同样的事情？

你不能使用 CSS 或 JavaScript 因为它是一个 iframe .

非常感谢任何想法。

更新：

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

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

Answer 1

直接来自show info

Note: This is a deprecation announcement for the showinfo parameter. In addition, the behavior for the rel parameter is changing. Titles, channel information, and related videos are an important part of YouTube’s core user experience, and these changes help to make the YouTube viewing experience consistent across different platforms.

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

它清楚地表明，这是他们认为是 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 fiddle :/

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

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

Answer 4

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

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

不幸的是，代码在 Whosebug 上似乎运行不正确我还添加了一个 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...) you can get the event for the stopping (completing) of the video, then cue up the video by ID into the player. See 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);
}

YouTube 嵌入 showinfo 已被弃用

YouTube embed showinfo has been deprecated

embed

youtube

google-api

youtube-api

youtube-data-api