停止嵌入式YouTube iframe？

Question

我正在使用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>

而且我在同一页面上有乘以乘以视频。

我想在使用JavaScript左右的单击按钮中停止所有它们或其中一个。

是否可以？

更新：

我尝试了 talvi watia 所说并使用了什么：

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

我得到了：

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

Answer 1

不幸的是，这些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 2

如果有人仍在寻找答案，我就这样解决了：

$("#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 3

这是 codepen ，它对我有用。

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

我需要的是将视频出现在模式窗口中， stop 播放它在关闭时

是代码：（ from： 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-object中，例如模态窗口，如果我使用相同的按钮播放我用来显示模式的视频，它将无法使用，所以我使用了以下内容：

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

注意：？autoplay = 1＆amp;放置在何处以及使用'＆amp;'在下一个属性之前，允许暂停继续工作。

Answer 4

您可能需要通过 youtube javascript api 参考文档。

当您将视频嵌入页面上时，您将需要传递此参数：

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

如果要停止所有视频按钮，则可以设置JavaScript例程以循环浏览视频并停止它们：

player.stopVideo()

这确实涉及跟踪跟踪页面上每个视频的所有页面ID。更简单的可能是上课，然后使用jquery.east。

$('#myStopClickButton').click(function(){
  $('.myVideoClass').each(function(){
    $(this).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

Talvi的答案可能仍然有效，但是YouTube JavaScript API已被标记为弃用。现在，您应该使用新的 youtube iframe 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();
    }
});

Answer 7

最简单的方法是

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

Answer 8

一个人不能简单地高估这篇文章并回答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 9

这是我发现的最直接的解决方案。

1. 非常重要！添加？enablejsapi = 1参数到iframe src属性。例如scr =“ https://youtube.com/embed/video_id?enablejsapi=1

2. var iframe = document.queryselector（'iframe'';; 或您想掌握该元素。

3. iframe.contentwindow.postmessage（'{“ event”：“命令”，“ func”：“ pausevideo”，“ args”：“”}'}'}'，'*'）;

本质上，此代码是持有YouTube Player对象，该对象包含在＆lt; Iframe＆gt;元素中。参见“ noreferrer”> htmliframeement.contentwindowwindowwindowwindowwindowwindow “ https://developer.mozilla.org/en-us/docs/web/api/window/postmessage” rel =“ noreferrer”> postmessage（）。最后，Google提供了JavaScript API参考在这里用于所有可用功能。

Answer 10

对于带有视频的Twitter Bootstrap模态/弹出窗口，这对我有用：

$('.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">×</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>

基于 marco的答案，请注意，我只需要添加enablejsapi = 1 parameter视频URL（rel = 0只是为了在最后不显示相关的视频）。 JS 后Message功能是所有繁重的举重，实际上会阻止视频。

该片段可能由于要求权限而无法显示视频，但是在常规浏览器中，截至2018年11月，该视频应起作用。

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

我们如何暂停/停止YouTube iframe到我们使用ModalPopup中的嵌入视频时

 $('#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

     });

Answer 13

这是我使用更新的YouTube API的解决方案。包括开始，停止，暂停。

https://codesandbox.io/s/s/s/s/s/s/youtube-video-video-video-player-player-73x4b

Answer 14

另请参见当您留下选项卡视图或最小化离子应用程序时，如何暂停或停止iFrame youtube视频

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

Answer 15

$('#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 16

与打字稿反应的解决方案

---

interface Props {
  videoId: string;
}

function YoutubeEmbedded (props:Props) {
  const { videoId } = props;

  const pauseVideo = () => {
    // At the place of pauseVideo you can use "stopVideo", "playVideo"
    var iframe = document.querySelector("iframe");
    iframe?.contentWindow?.postMessage(
      '{"event":"command","func":"stopVideo","args":""}',
      "*"
    );
  };

  const handleCloseBtnClick = () => {
    pauseVideo();
    setShowVideoModal(false);
  };

return(
  <iframe
    src={`https://www.youtube-nocookie.com/embed/${videoId}?enablejsapi=1`}
    title="YouTube video player"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowFullScreen={true}
    frameBorder={0}
  />

  <button
    onClick={handleCloseBtnClick}
  />
)}

Answer 17

var vid_element = $('.youtube-player');
vid_element.detach();
$('#parent').append(vid_element);

我发现独立式，然后附加元素比重新分配SRC属性更可靠。

Answer 18

有一种非常简单的方法可以实现
如果您在JS中

  
 function pauseVideo(){
 document.getElementById("myVideoId").contentWindow.postMessage('{"event":"command","func":"stopVideo","args":""}', '*');  

 } 

<!DOCTYPE html>
<html>
<body>

<iframe id="myVideoId" src="https://www.youtube.com/embed/Q63qjIXMqwU?enablejsapi=1"></iframe> 
<button onclick = {pauseVideo()}>Pause</button>




</body>
</html>

如果您正在使用react js

export const VideoPlayer = () =>{
 const videoooo = useRef();
  const pauseVideo = () => {
  //at the place of pauseVideo you can use "stopVideo", "playVideo"
videoooo.current.contentWindow.postMessage(
      '{"event":"command","func":"pauseVideo","args":""}',
      "*"
    );
  };

return(<> <iframe
        ref={videoooo}
        id="myVideoId"
        src="https://www.youtube.com/embed/Q63qjIXMqwU?enablejsapi=1"
      ></iframe>
      <button
        onClick={() => {
          pauseVideo();
        }}
      >
        Pause
      </button></>)
}