YouTube 嵌入 showinfo 已被弃用

Posted 2023-02-24

【中文标题】YouTube 嵌入 showinfo 已被弃用

【英文标题】：YouTube embed showinfo has been deprecated

【发布时间】：2019-03-24 00:29:18

【问题描述】：

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

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

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

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

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

非常感谢任何想法。

更新：

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

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

【问题讨论】：

刚刚发现“更多视频”面板仅在 iframe 宽度 >= 480px 时才会显示。在某些情况下，将其宽度设置为 479px 可能是一种解决方法...

我无法复制这个。你有例子吗？

【参考方案1】：

直接来自show info

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

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

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

【讨论】：

感谢您的回答。我希望有人提出了一个不违反 TOC 的解决方案。

您确实意识到您向我发送了我在问题中发布的链接的引用，对：D

@Daut yup 有时人们甚至无法阅读他们发布的内容。很多次我看到人们发布链接到它说它不起作用的东西，我必须指出这一点:) 我希望你能找到解决办法，但如果你正在寻找来自 Youtube 的东西，这就是他们所说的。围绕他们的意图工作永远不会稳定。 Google 比我们聪明。

【参考方案2】：

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

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

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

【讨论】：

使用 YouTube 视频作为背景，这对我有用，谢谢

我认为这违反了使用条款...不是一个完美的解决方案

【参考方案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;

【讨论】：

不是用户友好的解决方案...在悬停缩略图上播放后不应显示...

【参考方案4】：

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

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

不幸的是，代码似乎无法在 *** 上正确运行，我还添加了一个 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>

【讨论】：

这不会隐藏任何内容，它只会阻止用户与视频互动，但如果用户的互联网连接速度较慢，他们仍然会看到“稍后观看”和“分享”按钮，并且渠道。这根本不起作用：（

【参考方案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>

【讨论】：

这会实现什么？您想在没有信息的情况下开始播放，event.data == 0 是结束事件。

【参考方案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>                                        

【讨论】：

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

@Daut，这是一个 hack 之上的 hack，但您可以将 YouTube 视频的 iframe 高度额外增加 120 像素，这样顶部和底部都有 60 像素的黑条，而这是你切断的部分。 （这些黑客很可能针对 TOS。）

@Xonatron 和 Daut，我同意你们俩的观点，这不应该用于构建的生产实现，这就是我推荐 Vimeo Pro 的原因。它可能有助于在私人环境中快速演示一个想法。

【参考方案7】：

<div id="schnitt">

<iframe   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;

【参考方案8】：

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

iframe 
  transform:scale(1.4);

【讨论】：

这是一个很好的答案，但是隐藏徽标违反了 YouTube 的条款和条件。不可接受的解决方案，除非它是一个小型投资组合网站。我正在寻找更多“showinfo 现已回归”类型的答案

那么您可以尝试使用Vimeo 或自托管视频。祝你好运。