如何嵌入一个自动播放的YouTube视频在iframe?

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

据我所知，没有办法通过修改URL的标志来做到这一点。是否有一种方法可以使用JavaScript &API ?

932004 次浏览
小开
最佳答案

这适用于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现在完全支持，“创建欧美。播放器对象-示例2显示如何在JavaScript中设置“自动播放”。

小开

旗帜，或者你可以用IFRAME和OBJECT嵌入的参数在这里被记录;关于哪个参数适用于哪个玩家的细节也清楚地提到了:

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

你会注意到所有的播放器(AS3, AS2和HTML5)都支持autoplay。

小开

youtube的内嵌代码默认是自动播放的。只需在“src”属性的末尾添加__abc0即可。例如:

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

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

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

然后用jquery:

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

这将在document.ready上自动播放视频

注意，你也可以在点击函数中使用这个来点击另一个元素来启动视频

更重要的是，你不能在移动设备上自动启动视频，所以用户总是要点击视频播放器本身来启动视频

< p >编辑: 从文件上看，我不是百分之百确定。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
});
小开

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

jQuery func:

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

工作正常

小开

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

如果你使用url进行单个查询，那么?autoplay=1工作于正如mjhm的回答所示

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

为了让mjhm在2018年5月在Chrome 66上工作时接受答案，我在iframe中添加了allow=autoplay，在查询字符串中添加了enable_js=1:

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

自2018年4月起，谷歌对播放政策进行了一些更改。你不仅需要添加autoplay=1作为查询参数，还需要添加allow='autoplay'作为iframe的属性

所以你必须这样做:

<iframe src="https://www.youtube.com/embed/VIDEO_ID?autoplay=1" allow='autoplay'></iframe>
小开
我没有找到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>
小开

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


}
小开

现在我在iframe标签上添加了一个新的属性“allow”，例如:

< p >允许= "加速度计;播放;加密介质;陀螺仪; 画中画" < / p >

最终代码是:

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

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

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

是的，你可以根据谷歌的自动播放Iframe策略嵌入一个带有Iframe标签的自动播放YouTube视频

试试这个方法:

<iframe src="https://www.youtube.com/embed/video-id" frameborder="0" allow="autoplay; fullscreen"></iframe>

虽然这个过程一次只适用于一个视频，但要使用Iframe代码嵌入一组YouTube视频，你需要使用第三方工具，如Taggbox Widget，它与谷歌的API集成，允许用户使用channel &嵌入YouTube视频、短片;YouTube小部件格式的播放列表url。

此外，您还可以使用生成的Iframe代码轻松地将响应式YouTube小部件嵌入到您的网站上。

<iframe src="https://widget.taggbox.com/unique-id" style="width:100%;height:600px;border:none;"></iframe>

提交答案