如何在iframe中嵌入自动播放的YouTube视频？

Question

我想嵌入YouTube视频的新版本iframe，并让它自动播放。

据我所知，没有通过修改URL添加标志的方法来实现此目的。是否可以使用JavaScript和API来实现自动播放？

- 472084

---

有没有办法通过代码在视频开始播放时静音，我不想让用户被声音吓到？ - daniel metlitski

浏览器有相关设置。 - mercury

Answer 1

这在Chrome中有效，但在Firefox 3.6中无效（警告：RickRoll视频）：

<iframe width="420" height="345" src="http://www.youtube.com/embed/oHg5SJYRHA0?autoplay=1" frameborder="0" allowfullscreen></iframe>

嵌入式iframe的JavaScript API已经存在，但仍然被标记为实验性功能。

更新：现在完全支持iframe API，并且“创建YT.Player对象-示例2”展示了如何在JavaScript中设置“autoplay”属性。

- mjhm

---

提示：在移动设备上，由于限制，src参数和api调用都可能无法使用：https://developers.google.com/youtube/iframe_api_reference#Mobile_considerations - Linus Caldwell

我发现在移动端（Android 5.0上的Webview）函数onYouTubeIframeAPIReady()没有被触发。有人有解决方案吗？ - Someone Somewhere

有没有办法通过代码在视频开始播放时静音，我不想让用户被声音吓到？ - daniel metlitski

请问如何在Chrome 65中允许YouTube iframe API自动播放？@JoJo - MattAllegro

您可能还需要为您的iFrame添加allow="autoplay"。 - Jeffz

@danielmetlitski 你可以使用静音属性来静音你的视频。 - Bhavin

Answer 2

自2018年4月以来，Google对自动播放策略进行了一些更改。您不仅需要将autoplay=1作为查询参数添加，还需要将allow='autoplay'作为iframe的属性添加。因此，您需要像这样做：

<iframe src="https://www.youtube.com/embed/VIDEO_ID?autoplay=1" allow='autoplay'></iframe>

- MatayoshiMariano

---

在撰写本文时（2021年7月20日），仅将autoplay=1作为参数是不够的。我需要在iframe中添加allow='autoplay'才能使自动播放功能正常工作。 - Gkiokan

@Gkiokan 是的，你需要那个。我在代码片段中有它 :) - MatayoshiMariano

是的，我想要让其他人清楚地知道，解决方案不仅仅是URL中的param参数，还包括额外的参数 :) 也许你应该明确提到这一点。 - Gkiokan

你可能还需要设置"&mute=1"，这也是我所需要的。请参见https://dev59.com/O1kR5IYBdhLWcg3w4hDN - ObjectNameDisplay

Answer 3

2018年8月，我没有找到有关iframe实现的有效示例。其他问题都与仅适用于Chrome的问题有关，这有点暴露了它。

您需要通过mute=1来静音声音，以便在Chrome上自动播放。使用autoplay=1作为参数，FF和IE似乎可以正常工作。

<iframe src="//www.youtube.com/embed/{{YOUTUBE-ID}}?autoplay=1&mute=1" name="youtube embed" allow="autoplay; encrypted-media" allowfullscreen></iframe>

- Tim Vermaelen

---

目前为止最有帮助的答案。很有道理。 - robbclarke

非常感谢您的答案，但是在自动播放视频后，我如何取消静音？ - Pyzard

重点是对于嵌入式视频来说，从程序上无法实现取消静音。用户要想打开声音，必须在播放器上增加音量。此时，用户已经同意播放声音。 - Tim Vermaelen

这甚至不在官方文档中：https://developers.google.com/youtube/player_parameters#autoplay - Toniq

这是一个与浏览器相关的问题，而不是YouTube的问题： https://developer.chrome.com/blog/autoplay/ - Tim Vermaelen

Answer 4

YouTube嵌入代码默认情况下自动播放是关闭的。只需在“src”属性末尾添加autoplay=1即可开启自动播放。例如：

<iframe src="http://www.youtube.com/embed/xzvScRnF6MU?autoplay=1" width="960" height="447" frameborder="0" allowfullscreen></iframe>

- Waheed ur Rehman

---

请在src后面添加"?autoplay=1"。 - Squirrl

是的，实际上autoplay=1，而问号？表示src可能有参数，如颜色、控件等，每个参数用&符号分隔。详细描述可以在此处查看： https://developers.google.com/youtube/player_parameters#Parameters - Waheed ur Rehman

Answer 5

关于如何嵌入YouTube视频并实现自动播放以及在视频末尾不显示推荐视频的2014年iframe嵌入演示。

rel=0&autoplay 

以下是示例：

<iframe width="640" height="360" src="//www.youtube.com/embed/JWgp7Ny3bOo?rel=0&amp;autoplay=1" frameborder="0" allowfullscreen></iframe>

- Ralph

Answer 6

在iframe的src末尾添加&enablejsapi=1，以允许在视频上使用js API。

然后使用jquery:

jQuery(document).ready(function( $ ) {
  $('.video-selector iframe')[0].contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
});

这应该能够在文档加载完成后自动播放视频。

请注意，您还可以在单击函数中使用此功能以单击另一个元素来启动视频。

更重要的是，在移动设备上无法自动启动视频，因此用户始终需要单击视频播放器本身才能开始播放视频。

编辑： 我实际上并不确定在document.ready时iframe是否已准备就绪，因为YouTube可能仍在加载视频。我实际上是在单击函数内使用此功能：

$('.video-container').on('click', function(){
  $('video-selector iframe')[0].contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
  // add other code here to swap a custom image, etc
});

- bdanin

---

利用这个答案，并在jQuery选择器中包装一个setTimeout对我有用。 - tyler.frankenstein

一样的方法，每秒触发事件几次就可以了，它会正常工作。 - Matthias Kleine

这并不是频繁触发事件的问题！ YouTube 最近更新了关于自动播放嵌入视频的政策。新政策规定，在页面上没有真正的用户交互（如点击、滚动等）之前，视频不能自动播放。我认为在你的情况下，因为你每秒都会触发代码，所以在第一次用户交互后代码就会正常运行，因此你可能会认为原因是频繁触发事件！然而，像这样每秒触发代码并不是一个好习惯！ - Ahmed El-Atab

Answer 7

对于不知道多个查询提示的人（过去的我和未来的我）

如果您只使用链接进行单个查询，那么?autoplay=1就可以像mjhm's answer所展示的那样工作

<iframe src="https://www.youtube.com/embed/oHg5SJYRHA0?autoplay=1"></iframe>

如果您正在进行多个查询，请记住第一个查询以 ? 开始，而其余的查询以 & 开始。

比如您想关闭相关视频但启用自动播放...

这样做是有效的。

<iframe src="https://www.youtube.com/embed/oHg5SJYRHA0?rel=0&autoplay=1"></iframe>

并且这个可行

<iframe src="https://www.youtube.com/embed/oHg5SJYRHA0?autoplay=1&rel=0"></iframe>

但是这些方法都无法解决问题...

<iframe src="https://www.youtube.com/embed/oHg5SJYRHA0?rel=0?autoplay=1"></iframe>

<iframe src="https://www.youtube.com/embed/oHg5SJYRHA0&autoplay=1&rel=0"></iframe>

示例比较

https://jsfiddle.net/Hastig/p4dpo5y4/

更多信息

阅读下面Local的回复，了解有关使用多个查询字符串的更多信息

- Hastig Zusammenstellen

---

你的代码没有起作用是因为你已经在其中加入了 ?rel=0。如果你将其删除，它就会起作用。如果你想了解更多关于查询字符串语法的信息，请点击这里。?rel=0?autoplay=1 应该改为 ?autoplay=1 或者 ?rel=0&autoplay=1。 - jaggedsoft

@NextLocal 谢谢，下次我处理嵌入YouTube视频的问题时会回来编辑/删除我的答案。 - Hastig Zusammenstellen

你提供的例子http://www.youtube.com/embed/oHg5SJYRHA0&autoplay=1肯定行不通，但是https://www.youtube.com/embed/oHg5SJYRHA0?autoplay=1 应该可以。 - jaggedsoft

@NextLocal 哈哈，我现在明白了。不确定为什么之前没意识到 :D 再次感谢。 - Hastig Zusammenstellen

有没有一种方法可以通过代码在视频开始播放时将声音静音，我不想让用户被声音吓到。 - daniel metlitski

@danielmetlitski 我相信你现在已经知道如何静音了，但是这里有一个答案供未来读者参考：[https://dev59.com/JlsW5IYBdhLWcg3wX2Zz#44725609] - Hastig Zusammenstellen

Answer 8

< p >在此处记录了您可以与IFRAME和OBJECT嵌入一起使用的标志或参数；也清楚地提到了哪个参数适用于哪个播放器：< / p> < p >YouTube嵌入式播放器和播放器参数< / p> < p >您会注意到，所有播放器（AS3、AS2和HTML5）都支持autoplay。< / p>

- Salman A

Answer 9

为了让mjhm提供的被接受的答案在2018年5月的Chrome 66上运行，我在iframe中添加了allow=autoplay，并且在查询字符串中添加了enable_js=1:

<iframe allow=autoplay width="420px" height="345px" src="http://www.youtube.com/embed/oHg5SJYRHA0?autoplay=1&enable_js=1"></iframe>

- MattAllegro

Answer 10

如果有人正在寻找完美的解决方案，那么自动播放*是关键所在，但这并没有在任何地方提到。

*autoplay可以是一种功能或属性，具体涵义需要根据上下文来确定。

  <iframe allow="autoplay *; fullscreen *" allowfullscreen="true" 
      src="https://example.com">
   </iframe>

& 如果您想完全懒加载YouTube视频，请使用以下方法-

  <iframe
        srcdoc="<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}</style><a href=https://www.youtube.com/embed/unICbsPGFIA?autoplay=1><img src=https://img.youtube.com/vi/zEkgWzi5T-Y/hqdefault.jpg><span>▶</span></a>"
        src="https://www.youtube.com/embed/unICbsPGFIA?autoplay=1&loop=1&playlist=zEkgWzi5T-Y"
        frameborder="0"
        allow="accelerometer; autoplay *; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen
      ></iframe>

- Ashwini Kumar