Javascript 停止嵌入youtube iframe？

我正在使用YouTube iframe在我的网站上嵌入视频

<iframe width="100%" height="443" class="yvideo" id="p1QgNF6J1h0"
              src="http://www.youtube.com/embed/p1QgNF6J1h0?rel=0&controls=0&hd=1&showinfo=0&enablejsapi=1"
              frameborder="0" allowfullscreen>
</iframe>

我得到：

Uncaught TypeError: Object [object Object] has no method 'stopVideo' 

---

您可能需要查看参考文档

在页面上嵌入视频时，需要传递以下参数：

http://www.youtube.com/v/VIDEO_ID?version=3&enablejsapi=1

如果需要“停止所有视频”按钮，可以设置javascript例程来循环播放视频并停止它们：

player.stopVideo()

这确实涉及到跟踪页面上每个视频的所有页面ID。更简单的方法可能是创建一个类，然后使用jQuery.each

$('#myStopClickButton').click(function(){
  $('.myVideoClass').each(function(){
    $(this).stopVideo();
  });
});

---

Talvi的答案可能仍然有效，但Youtube Javascript API已被标记为不推荐使用。您现在应该使用较新的

本文档提供了几种实现视频嵌入的方法，但对于您的目标，您应该包括以下内容：

//load the IFrame Player API code asynchronously
var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

//will be youtube player references once API is loaded
var players = [];

//gets called once the player API has loaded
function onYouTubeIframeAPIReady() {
    $('.myiframeclass').each(function() {
        var frame = $(this);

        //create each instance using the individual iframe id
        var player = new YT.Player(frame.attr('id'));

        players.push(player);
    });
}

//global stop button click handler
$('#mybutton').click(function(){

    //loop through each Youtube player instance and call stopVideo()
    for (var i in players) {
        var player = players[i];
        player.stopVideo();
    }
});

---

不幸的是，这些API的发展非常快。截至2015年5月，提议的解决方案不再有效，因为播放器对象没有

stopVideo

方法

在本页（）中可以找到可靠的解决方案，该解决方案可用于：

<iframe id="youtube_player" class="yt_player_iframe" width="640" height="360" src="http://www.youtube.com/embed/aHUBlv5_K8Y?enablejsapi=1&version=3&playerapiid=ytplayer"  allowfullscreen="true" allowscriptaccess="always" frameborder="0"></iframe>

另见

---

如果有人还在寻找答案，我已经这样解决了：

$("#photos").on("hide",function(){
    var leg=$('.videoPlayer').attr("src");
    $('.videoPlayer').attr("src",leg);
});

其中#photos是modal的ID，videoPlayer是iframe的类。 基本上，它会刷新src属性（并停止播放视频）。 所以

---

应该做到这一点。

API很混乱，因为它们不断变化。这种纯javascript的方式对我很有效：

 <div id="divScope" class="boom-lightbox" style="display: none;">
    <iframe id="ytplayer" width="720" height="405"   src="https://www.youtube.com/embed/M7lc1UVf-VE" frameborder="0" allowfullscreen>    </iframe>
  </div>  

//if I want i can set scope to a specific region
var myScope = document.getElementById('divScope');      
//otherwise set scope as the entire document
//var myScope = document;

//if there is an iframe inside maybe embedded multimedia video/audio, we should reload so it stops playing
var iframes = myScope.getElementsByTagName("iframe");
if (iframes != null) {
    for (var i = 0; i < iframes.length; i++) {
        iframes[i].src = iframes[i].src; //causes a reload so it stops playing, music, video, etc.
    }
}

//如果需要，我可以将范围设置为特定区域
var myScope=document.getElementById（'divScope'）；
//否则，将范围设置为整个文档
//var myScope=文档；
//如果里面有一个iframe，可能是嵌入的多媒体视频/音频，我们应该重新加载，使其停止播放
var iframes=myScope.getElementsByTagName（“iframe”）；
if（iframes！=null）{
对于（var i=0；i

最简单的方法是

var frame = document.getElementById("iframeid");
frame.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');

---

你不能简单地高估这篇文章，并回答thx OP和helpers。 我的解决方案只需交换视频id即可：

<div style="pointer-events: none;">
    <iframe id="myVideo" src="https://www.youtube.com/embed/video_id?rel=0&modestbranding=1&fs=0&controls=0&autoplay=1&showinfo=0&version=3&enablejsapi=1" width="560" height="315" frameborder="0"></iframe> </div>

    <button id="play">PLAY</button>

    <button id="pause">PAUSE</button>


    <script>
        $('#play').click(function() {
            $('#myVideo').each(function(){ 
                var frame = document.getElementById("myVideo");
                frame.contentWindow.postMessage(
                    '{"event":"command","func":"playVideo","args":""}', 
                    '*'); 
            });
        });

        $('#pause').click(function() {
            $('#myVideo').each(function(){ 
                var frame = document.getElementById("myVideo");
                frame.contentWindow.postMessage(
                  '{"event":"command","func":"pauseVideo","args":""}',
                  '*'); 
            });
        });
    </script>

玩
暂停
$（“#播放”）。单击（函数（）{
$（'#myVideo'）。每个（函数（）{
var frame=document.getElementById（“myVideo”）；
frame.contentWindow.postMessage(
“{”事件“：”命令“，”函数“：”播放视频“，”参数“：”}”，
'*'); 
});
});
$（“#暂停”）。单击（函数（）{
$（'#myVideo'）。每个（函数（）{
var frame=document.getElementById（“myVideo”）；
frame.contentWindow.postMessage(
“{”事件“：”命令“，”函数“：”pauseVideo“，”参数“：”}”，
'*'); 
});
});

$（'aboutVideo.close'）。在（'click'，function（）上{
var reSrc=$（'.aboutPlayer'）.attr（“src”）；
$（'.aboutPlayer'）.attr（“src”，reSrc）
})

关于视频{ 宽度：100%； 身高：100%； } #aboutVideo.modal对话框，#aboutVideo.modal对话框.模态内容，#aboutVideo.modal对话框.模态内容.模态体{ 宽度：100%； 身高：100%； 边距：0！重要； 填充：0！重要； } #关于视频模式标题{ 填充：0px； 边框底部：0px实心#e5； 位置：绝对位置； 右：4%； 最高：4%； } #关于视频。模式标题。关闭{ 不透明度：1； 位置：绝对位置； z指数：99； 颜色：#fff； } #aboutVideo.modal页眉按钮.close{ 边界半径：50%； 宽度：7vw； 高度：7vw； 位置：绝对位置； 右：4%； 最高：7%； 背景：aliceblue； } #aboutVideo.modal标题按钮。关闭：悬停{ 背景色：rgba（255、255、255、0.28）； } #aboutVideo.modal页眉按钮。关闭img{ 宽度：20px； 利润上限：-0.2vw； }

看视频

这里有一个，它对我很有用

我在寻找将YT视频嵌入iframe的最简单解决方案，我觉得就是这样

我需要的是让视频出现在模式窗口中，并在关闭时停止播放

代码如下：（发件人：）

---

注意：

？autoplay=1&

它的放置位置以及在下一个属性之前使用“&”以允许暂停继续工作。

这里是一个纯javascript解决方案

<iframe 
width="100%" 
height="443" 
class="yvideo" 
id="p1QgNF6J1h0"
src="http://www.youtube.com/embed/p1QgNF6J1h0?rel=0&controls=0&hd=1&showinfo=0&enablejsapi=1"
frameborder="0" 
allowfullscreen>
</iframe>
<button id="myStopClickButton">Stop</button>


<script>
document.getElementById("myStopClickButton").addEventListener("click",    function(evt){
var video = document.getElementsByClassName("yvideo");
for (var i=0; i<video.length; i++) {
   video.item(i).contentWindow.postMessage('{"event":"command","func":"stopVideo","args":""}', '*');
}

});

停止
document.getElementById（“myStopClickButton”）.addEventListener（“click”，函数（evt）{
var video=document.getElementsByClassName（“yvideo”）；
对于（var i=0；i对于内置视频的Twitter引导模式/弹出窗口，这对我来说很有用：

 <div id="divScope" class="boom-lightbox" style="display: none;">
    <iframe id="ytplayer" width="720" height="405"   src="https://www.youtube.com/embed/M7lc1UVf-VE" frameborder="0" allowfullscreen>    </iframe>
  </div>  

//if I want i can set scope to a specific region
var myScope = document.getElementById('divScope');      
//otherwise set scope as the entire document
//var myScope = document;

//if there is an iframe inside maybe embedded multimedia video/audio, we should reload so it stops playing
var iframes = myScope.getElementsByTagName("iframe");
if (iframes != null) {
    for (var i = 0; i < iframes.length; i++) {
        iframes[i].src = iframes[i].src; //causes a reload so it stops playing, music, video, etc.
    }
}


$（'.modal.stop video on close'）.on（'hidden.bs.modal'，函数（e）{
$（'.video to stop'，this）.each（函数（）{
this.contentWindow.postMessage（“{”事件“：”命令“，”函数“：”停止视频“，”参数“：”}'，“*”）；
});
})；

&时代；
标题
接近
打开视频模式
在modalpopup中使用嵌入视频时如何暂停/停止YouTube iframe

 $('#close_one').click(function (e) {
         
         
         let link = document.querySelector('.divclass');// get iframe class 
         let link = document.querySelector('#divid');// get iframe id
         let video_src = link.getAttribute('src');

         $('.youtube-video').children('iframe').attr('src', ''); // set iframe parent div value null 
         $('.youtube-video').children('iframe').attr('src', video_src);// set iframe src again it works perfect

     });

但是我需要为每个播放器创建一个对象？stopVideo（）是否可以在没有任何预先设置的情况下工作？如果将
enablejsapi=1
添加到嵌入中，您应该能够引用API。它需要为每个视频添加。我得到：
uncaughttypeerror:object[object object]没有方法“stopVideo”
包含有关跨站点检测错误的信息。（通常在chrome中是一个大问题。）至于第二个，你需要改变
.myVideoClass
，将类附加到你的嵌入中。例如
.yvideo
@Danpe这里可以找到一个完整的工作示例：我认为这是当你以友好方式加载iFrame时的最佳选择。好的提示，谢谢。我将
：visible
合并到它中，而不是重置所有内容在页面上，我刚刚重置了当前的一个。Whe
<div style="pointer-events: none;">
    <iframe id="myVideo" src="https://www.youtube.com/embed/video_id?rel=0&modestbranding=1&fs=0&controls=0&autoplay=1&showinfo=0&version=3&enablejsapi=1" width="560" height="315" frameborder="0"></iframe> </div>

    <button id="play">PLAY</button>

    <button id="pause">PAUSE</button>


    <script>
        $('#play').click(function() {
            $('#myVideo').each(function(){ 
                var frame = document.getElementById("myVideo");
                frame.contentWindow.postMessage(
                    '{"event":"command","func":"playVideo","args":""}', 
                    '*'); 
            });
        });

        $('#pause').click(function() {
            $('#myVideo').each(function(){ 
                var frame = document.getElementById("myVideo");
                frame.contentWindow.postMessage(
                  '{"event":"command","func":"pauseVideo","args":""}',
                  '*'); 
            });
        });
    </script>

    <div><a href="#" class="play-video">Play Video</a></div>
    <div><a href="#" class="stop-video">Stop Video</a></div>
    <div><a href="#" class="pause-video">Pause Video</a></div>

    <iframe class="youtube-video" width="560" height="315" src="https://www.youtube.com/embed/glEiPXAYE-U?enablejsapi=1&version=3&playerapiid=ytplayer" frameborder="0" allowfullscreen></iframe>

$('a.play-video').click(function(){
    $('.youtube-video')[0].contentWindow.postMessage('{"event":"command","func":"' + 'playVideo' + '","args":""}', '*');
});

$('a.stop-video').click(function(){
    $('.youtube-video')[0].contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');
});

$('a.pause-video').click(function(){
    $('.youtube-video')[0].contentWindow.postMessage('{"event":"command","func":"' + 'pauseVideo' + '","args":""}', '*');
});

https://www.youtube.com/embed/EzAGZCPSOfg?autoplay=1&enablejsapi=1&version=3&playerapiid=ytplayer

<iframe 
width="100%" 
height="443" 
class="yvideo" 
id="p1QgNF6J1h0"
src="http://www.youtube.com/embed/p1QgNF6J1h0?rel=0&controls=0&hd=1&showinfo=0&enablejsapi=1"
frameborder="0" 
allowfullscreen>
</iframe>
<button id="myStopClickButton">Stop</button>


<script>
document.getElementById("myStopClickButton").addEventListener("click",    function(evt){
var video = document.getElementsByClassName("yvideo");
for (var i=0; i<video.length; i++) {
   video.item(i).contentWindow.postMessage('{"event":"command","func":"stopVideo","args":""}', '*');
}

});

 $('#close_one').click(function (e) {
         
         
         let link = document.querySelector('.divclass');// get iframe class 
         let link = document.querySelector('#divid');// get iframe id
         let video_src = link.getAttribute('src');

         $('.youtube-video').children('iframe').attr('src', ''); // set iframe parent div value null 
         $('.youtube-video').children('iframe').attr('src', video_src);// set iframe src again it works perfect

     });