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

Question

我正在尝试嵌入 YouTube 视频的新 iframe 版本并让它自动播放。

据我所知，没有办法通过修改 URL 的标志来做到这一点。有没有办法通过使用 JavaScript 和 API 来做到这一点？

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>

JavaScript API for iframe embeds 存在，但仍作为实验性功能发布。

更新：现在完全支持 iframe API，"Creating YT.Player objects - Example 2" 展示了如何在 JavaScript 中设置“自动播放”。

Answer 2

自 2018 年 4 月起，Google 对 Autoplay Policy 进行了一些更改。您不仅需要添加autoplay=1 作为查询参数，还需要添加allow='autoplay' 作为iframe 的属性

所以你必须这样做：

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

Answer 3

默认情况下，youtube 的嵌入代码已关闭自动播放。只需在“src”属性的末尾添加autoplay=1。例如：

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

Answer 4

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>

Answer 5

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

然后用 jquery:

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

这应该会在 document.ready 上自动播放视频

注意，你也可以在 click 函数中使用它来点击另一个元素来开始视频

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

编辑： 我实际上不是 100% 确定 document.ready iframe 会准备好，因为 YouTube 仍然可以加载视频。我实际上是在 click 函数中使用这个函数：

$('.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
});

Answer 6

2014 iframe embed 介绍如何嵌入带有自动播放功能的 youtube 视频，并且在剪辑结尾处没有建议的视频

rel=0&autoplay 

下面的例子：.

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

Answer 7

标志，或可用于 IFRAME 和 OBJECT 嵌入的参数在此处记录；还清楚地提到了有关哪个参数适用于哪个播放器的详细信息：

YouTube Embedded Players and Player Parameters

您会注意到所有播放器（AS3、AS2 和 HTML5）都支持autoplay。

Answer 8

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

如果您使用 url 进行单个查询，只需 ?autoplay=1 工作 as shown by 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/

更多信息

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

Answer 9

现在我在 iframe 标记上添加了一个新属性“允许”，例如：

allow="加速计；自动播放；加密媒体；陀螺仪； 画中画”

最终代码为：

<iframe src="https://www.youtube.com/embed/[VIDEO-CODE]?autoplay=1" 
frameborder="0" style="width: 100%; height: 100%;"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"></iframe>

Answer 10

为了让 mjhm 于 2018 年 5 月在 Chrome 66 上工作得到接受的答案，我将 allow=autoplay 添加到 iframe 并将 enable_js=1 添加到查询字符串：

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

Answer 11

1 - 将&enablejsapi=1 添加到IFRAME SRC

2 - jQuery 函数：

  $('iframe#your_video')[0].contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');

工作正常

Answer 12

如果有人正在寻找，这是一个完美的解决方案，自动播放*是这里的关键，任何地方都没有提到。

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

Answer 13

要使用javascript api，

<script type="text/javascript" src="swfobject.js"></script>
  <div id="ytapiplayer">
    You need Flash player 8+ and JavaScript enabled to view this video.
  </div>

  <script type="text/javascript">

    var params = { allowScriptAccess: "always" };
    var atts = { id: "myytplayer" };
    swfobject.embedSWF("http://www.youtube.com/v/OyHoZhLdgYw?enablejsapi=1&playerapiid=ytplayer&version=3",
                       "ytapiplayer", "425", "356", "8", null, null, params, atts);

  </script>

使用 id 播放 youtube：

swfobject.embedSWF

参考：https://developers.google.com/youtube/js_api_referencemagazine

Answer 14

<iframe width="560" height="315" 
        src="https://www.youtube.com/embed/9IILMHo4RCQ?rel=0&amp;controls=0&amp;showinfo=0&amp;autoplay=1" 
        frameborder="0" allowfullscreen></iframe>

Answer 15

2018 年 12 月，

正在寻找一个自动播放、循环播放、静音的 youtube 视频以进行反应。

其他答案无效。

我找到了一个带有库的解决方案：react-youtube

class Video extends Component {

    _onReady(event) {
        // add mute
        event.target.mute();
        // add autoplay
        event.target.playVideo();
    }

    render() {
        const opts = {
            width: '100%',
            height: '700px',
            playerVars: {
                // remove video controls 
                controls: 0,
                // remove related video
                rel: 0
            }
        };

        return (
            <YouTube
                videoId="oHg5SJYRHA0"
                opts={opts}
                // add autoplay
                onReady={this._onReady}
                // add loop
                onEnd={this._onReady}
            />
        )
    }

}