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

Question

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

据我所知，没有办法通过修改URL的标志来做到这一点。有没有一种方法可以通过使用JavaScript来做到这一点?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>

iframe嵌入的JavaScript API已经存在，但仍作为实验特性发布。

更新:iframe API现在完全支持和"创建YT。"示例2"展示了如何在JavaScript中设置"自动播放"。

Answer 2

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

所以你必须这样做:

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

Answer 3

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 4

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

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

Answer 5

2014 iframe embed on如何嵌入youtube视频与自动播放和没有建议的视频在剪辑结束

rel=0&autoplay 

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

Answer 6

在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函数中使用这个来点击另一个元素来开始视频

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

编辑:我对文件不是百分百确定。iframe将准备好，因为YouTube可能仍在加载视频。我实际上是在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
});

Answer 7

标志或可用于IFRAME和OBJECT嵌入的参数在这里记录;关于哪个参数适用于哪个玩家的细节也被清楚地提到:

YouTube内置播放器和播放器参数

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

Answer 8

对于不知道的人(过去的我和未来的我)的多重查询提示

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

Answer 9

要获得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>

Answer 10

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

Answer 11

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

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

Answer 12

1 -添加&enablejsapi=1到IFRAME SRC

2 - jQuery function:

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

工作正常

Answer 13

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

Answer 14

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

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

Answer 16

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

试试这样:

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

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

此外，你可以很容易地嵌入响应YouTube小部件与生成的Iframe代码在您的网站。

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