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

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

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

此功能在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中设置“自动播放”。

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

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

自2018年4月起，Google对自动播放政策进行了一些更改。因此，您将必须执行以下操作：

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

2018年8月，我没有找到有关iframe实施的可行示例。其他问题仅与Chrome有关，这给了它一些帮助。

您必须将声音静音mute=1才能在Chrome上自动播放。FF和IE似乎可以很好地autoplay=1用作参数。

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

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 src的末尾，添加&enablejsapi=1以允许在视频上使用js API

然后用jQuery：

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

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

请注意，您还可以在点击函数中使用此按钮来点击另一个元素以开始播放视频

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

编辑：实际上我不是100％确定document.ready，因为YouTube仍可以加载视频，所以iframe可以使用了。我实际上是在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
});

此处记录了可用于IFRAME和OBJECT嵌入的标志或参数。还明确提到了有关哪个参数与哪个播放器一起使用的详细信息：

YouTube嵌入式播放器和播放器参数

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

多个查询提示不认识的人（过去和未来）

如果您使用url进行单个查询，则按mjhm的答案所示就?autoplay=1可以正常工作

<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答复，以获取有关使用多个查询字符串的更多信息

为了获得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>

现在，我在iframe广告代码中添加了新属性“ allow”，例如：

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>

1-添加&enablejsapi=1到IFRAME SRC

2-jQuery func：

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

工作良好

要使用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_reference 杂志

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

}