Question

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

据我所知，没有办法通过修改URL的标志来做到这一点。有没有办法通过使用javascript和amp; 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

youtube的嵌入代码默认情况下已禁用自动播放功能。只需在“src”属性的末尾添加autoplay=1即可。例如：

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

Answer 3

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

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

Answer 4

2014年iframe嵌入了如何使用自动播放嵌入YouTube视频，并且在剪辑结束时没有建议的视频

rel=0&amp;autoplay

以下示例：。

<iframe width="640" height="360" src="//www.youtube.com/embed/JWgp7Ny3bOo?rel=0&amp;autoplay=1" frameborder="0" 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上自动播放视频

请注意，您也可以在点击功能中使用此功能点击其他元素以启动视频

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

编辑：我实际上并不是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
});

Answer 6

标志，或者可以与IFRAME和OBJECT嵌入一起使用的参数在此处记录;有关哪个参数适用于哪个玩家的详细信息也明确提到：

YouTube Embedded Players and Player Parameters

您会注意到所有玩家（AS3，AS2和HTML5）都支持autoplay。

Answer 7

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

如果您使用网址发出单个查询，?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 8

要获得mjhm在2018年5月在Chrome 66上工作所接受的答案，我将enable_js=1添加到iframe，将<iframe allow=autoplay width="420px" height="345px" src="http://www.youtube.com/embed/oHg5SJYRHA0?autoplay=1&enable_js=1"></iframe>添加到查询字符串中：

^[0-9\wÀ-ž\s\-]+$

Answer 9

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 10

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

2 - jQuery func：

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

工作正常

Answer 11

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

Answer 12

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

2018年12月，

正在寻找自动播放，循环播放，静音的YouTube视频进行反应。

其他答案无效。

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

middleware

Answer 14

如今，我在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>

YouTube Iframe嵌入自动播放

14 个答案: