logo标签列表

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

javascripthtmliframeyoutubeyoutube-api
260

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

据我所知，没有通过修改URL添加标志的方法来实现此目的。是否可以使用JavaScript和API来实现自动播放？

有没有办法通过代码在视频开始播放时静音，我不想让用户被声音吓到？ - daniel metlitski
浏览器有相关设置。 - mercury
16个回答
4

现今我在 iframe 标签上增加了一个新的属性 "allow"，例如：

allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"

最终代码为：

<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
太神奇了！我一直想不通为什么页面加载有时只显示视频，而有时却不显示！ - shaneonabike
所有的都有了，但还是不起作用 :( - BVernon
1

1- 在IFRAME SRC中添加&enablejsapi=1

2- jQuery函数：

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

工作正常

1
在我的情况下，它可以在控制台中工作，或者当我手动与视频进行交互时。但是无法在加载时工作，即使超时也不行。 - mate.gvo
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_referencemagazine

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

是的，您可以使用Iframe标签嵌入一个自动播放的YouTube视频，按照Google自动播放Iframe政策的要求。

尝试以下方法：

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

虽然此过程仅适用于一次一个视频，但要使用Iframe代码嵌入一组YouTube视频，您需要使用第三方工具，例如与Google API集成的Taggbox Widget，该API允许用户以YouTube widget的形式使用频道和播放列表URL嵌入YouTube视频和短片。

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

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

2018年12月，

寻找用于React的自动播放、循环和静音的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}
            />
        )
    }

}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接