停止嵌入的YouTube的iframe？(Stop embedded 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>

和我有相同的页面上multiplie视频。

我想用JavaScript或因此停止所有的人或一个人在一个按钮的点击。

可能吗？

更新：

我试了一下Talvi Watia说和使用：

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

我越来越：

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

Answer 1:

你可能想通过审查的Youtube的JavaScript API参考文档。

当你在页面上嵌入视频（S），你就需要通过此参数：

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

Answer 2:

不幸的是，这些API的发展速度非常快。 自2015年5月，提出的解决方案不工作了，作为玩家对象没有stopVideo方法。

一个可靠的解决方案是在页面（这被发现1 ），并将其与工作原理：

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

和下面的JS / jQuery代码：

$('.yt_player_iframe').each(function(){
  this.contentWindow.postMessage('{"event":"command","func":"stopVideo","args":""}', '*')
});

Answer 3:

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

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

凡#photos是模态的ID和.videoPlayer是类的iframe。 基本上，它刷新src属性（和停止播放视频）。 所以，

    $('#myStopClickButton').click(function(){
      $('.yvideo').each(function(){
        var el_src = $(this).attr("src");
        $(this).attr("src",el_src);
      });
    });

应该做的伎俩。

Answer 4:

Talvi的答案可能仍然工作，但的Youtube API的Javascript已标记为过时。 现在，您应该使用新的Youtube API的IFrame 。

该文件提供了一些方法来完成视频嵌入，但对你的目标，你会包括以下内容：

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

Answer 5:

因为他们不断变化的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.
    }
}

Answer 6:

还有就是从一个名为“CAPTAIN无名氏”的用户它的工作对我来说是codepen - 但我必须给予信贷，这是因为 - 我在这里发帖，因为我正在寻找的iframe中嵌入视频YT简单的解决方案。 我觉得张贴会帮助别人花更少的时间搜索。

我需要的是有声视频出现在模式窗口播放和停止，当它被关闭

所以这里是神奇的： https://codepen.io/anon/pen/GBjqQr

    <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":""}', '*');
});

此外，如果您希望它在DOM对象尚未出现，如模态窗口自动播放，如果我用同样的按钮来播放，我用，显示模式也不会如此工作，我用这个视频：

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

注：自动播放= 1＆在那里的放置和使用的“＆”下一个属性之前，允许暂停继续工作。

Answer 7:

不能简单地高估了这个帖子和答案THX OP和助手。 我与解决方案只是VIDEO_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>

Answer 8:

最简单的方法是

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

Answer 9:

又见如何暂停或当你离开一个选项卡视图停止的iframe的YouTube视频或减少你离子应用

$scope.stopVideo = function() {
 var iframe = document.getElementsByTagName("iframe")[0].contentWindow;
 iframe.postMessage('{"event":"command","func":"'+'stopVideo'+   '","args":""}', '*');
 }

Answer 10:

 $('#aboutVideo .close').on('click',function(){ var reSrc = $('.aboutPlayer').attr("src"); $('.aboutPlayer').attr("src",reSrc) }) 

 #aboutVideo{ width: 100%; height: 100%; } #aboutVideo .modal-dialog, #aboutVideo .modal-dialog .modal-content, #aboutVideo .modal-dialog .modal-content .modal-body{ width: 100%; height: 100%; margin: 0 !important; padding: 0 !important; } #aboutVideo .modal-header{ padding: 0px; border-bottom: 0px solid #e5e5e5; position: absolute; right: 4%; top: 4%; } #aboutVideo .modal-header .close{ opacity: 1; position: absolute; z-index: 99; color: #fff; } #aboutVideo .modal-header button.close{ border-radius: 50%; width: 7vw; height: 7vw; position: absolute; right: 4%; top: 7%; background: aliceblue; } #aboutVideo .modal-header button.close:hover{ background-color: rgba(255, 255, 255, 0.28); } #aboutVideo .modal-header button.close img{ width: 20px; margin-top: -0.2vw; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <li class="see-video fa" type="button" data-toggle="modal" data-target="#aboutVideo"> <label>SEE VIDEO</label> </li> <div class="modal fade" id="aboutVideo" tabindex="-1" role="dialog" aria-labelledby="aboutVideoLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"><img src="http://www.freeiconspng.com/uploads/white-close-button-png-16.png"></span></button> </div> <div class="modal-body"> <iframe class="aboutPlayer" width="100%" height="100%" src="https://www.youtube.com/embed/fju9ii8YsGs?autoplay=0&showinfo=0&controls=2&rel=0" frameborder="0" allowfullscreen poster="https://www.google.co.in/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=0ahUKEwiOvaagmqfWAhUHMY8KHUuJCnkQjRwIBw&url=http%3A%2F%2Fnodeframework.com%2F&psig=AFQjCNEaHveDtZ81veNPSvQDx4IqaE_Tzw&ust=1505565378467268"></iframe> </div> </div> </div> </div> 

Answer 11:

这里有一个纯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":""}', '*');
}

});

Answer 12:

对于内部视频的Twitter的引导模式/弹出，这个工作对我来说：

 $('.modal.stop-video-on-close').on('hidden.bs.modal', function(e) { $('.video-to-stop', this).each(function() { this.contentWindow.postMessage('{"event":"command","func":"stopVideo","args":""}', '*'); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <div id="vid" class="modal stop-video-on-close" tabindex="-1" role="dialog" aria-labelledby="Title"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> <h4 class="modal-title">Title</h4> </div> <div class="modal-body"> <iframe class="video-to-stop center-block" src="https://www.youtube.com/embed/3q4LzDPK6ps?enablejsapi=1&rel=0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" frameborder="0" allowfullscreen> </iframe> </div> <div class="modal-footer"> <button class="btn btn-danger waves-effect waves-light" data-dismiss="modal" type="button">Close</button> </div> </div> </div> </div> <button class="btn btn-success" data-toggle="modal" data-target="#vid" type="button">Open video modal</button> 

根据马可的回答 ，请注意，我只需要在添加enablejsapi=1参数的视频URL（ rel=0仅仅是在年底未显示相关视频）。 该JS postMessage函数执行所有繁重的任务，它实际上停止视频。

该片段可能无法显示视频因请求的权限，但在普通浏览器本应为2018年十一月的工作。

文章来源: Stop embedded youtube iframe?