YouTube Iframe嵌入自动播放

时间:2011-09-02 09:50:32

标签: iframe youtube youtube-api

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

据我所知,没有办法通过修改URL的标志来做到这一点。有没有办法通过使用javascript和amp; API?

14 个答案:

答案 0 :(得分:407)

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

答案 1 :(得分:40)

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

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

答案 2 :(得分:24)

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

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

答案 3 :(得分:10)

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>

答案 4 :(得分:7)

在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
});

答案 5 :(得分:6)

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

YouTube Embedded Players and Player Parameters

您会注意到所有玩家(AS3,AS2和HTML5)都支持autoplay

答案 6 :(得分:6)

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

如果您使用网址发出单个查询,?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的回复,了解有关使用多个查询字符串的更多信息

答案 7 :(得分:2)

要获得mjhm在2018年5月在C​​hrome 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\-]+$

答案 8 :(得分:2)

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>

答案 9 :(得分:1)

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

2 - jQuery func:

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

工作正常

答案 10 :(得分:0)

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

答案 11 :(得分:0)

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

答案 12 :(得分:0)

2018年12月,

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

其他答案无效。

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

middleware

答案 13 :(得分:0)

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