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

这适用于 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 中设置“自动播放”。

---

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

所以你将不得不做这样的事情：

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

---

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>

---

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

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

---

在 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 仍然可以加载视频。我实际上在点击函数中使用了这个函数：

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

---

2014 iframe 嵌入关于如何嵌入带有自动播放功能的 youtube 视频，并且在剪辑末尾没有建议的视频

rel=0&autoplay 

下面的例子： .

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

---

您可以与 IFRAME 和 OBJECT 嵌入一起使用的标志或参数在此处记录；关于哪个参数适用于哪个播放器的详细信息也明确提到：

YouTube Embedded Players and Player Parameters

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

---

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

如果您使用 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 的回复，了解有关使用多个查询字符串的更多信息

---

现在，我在 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>

---

为了让 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>

---

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

2 - jQuery函数：

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

工作正常

---

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

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

---

要使用 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

---

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

---

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}
            />
        )
    }

}

---