web-dev-qa-db-ja.com

埋め込み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>

そして、同じページに複数のビデオがあります。

Javascriptなどを使用してボタンをクリックするだけで、それらのすべてまたは1つを停止したいです。

出来ますか？

更新：

Talvi Watiaが言って使用したことを試しました：

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

私は得ています：

Uncaught TypeError: Object [object Object] has no method 'stopVideo'
javascripthtml5iframeyoutube-api
37
Danpe

Youtube JavaScript API リファレンスドキュメントを参照してください。

ページに動画を埋め込むとき、このパラメーターを渡す必要があります。

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

残念ながら、これらの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":""}', '*')
});
64
Marco Faustinelli

誰かがまだ答えを探しているなら、私はそれを次のように解決しました：

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

トリックを行う必要があります。

29
Jax297

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

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.
    }
}
12
JJ_Coder4Hire

「CAPTAIN ANONYMOUS」という名前のユーザーからのコードペンがありますが、それは私のために働きました-しかし、私はそれが当然のところでクレジットを与える必要があります-YT iframe内の動画。投稿することで、他の人が検索に費やす時間を短縮できると思います。

私が必要としたのは、ビデオをモーダルウィンドウに表示し、閉じたときに再生を停止することでした

ここに魔法があります： 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オブジェクトでAUTOPLAYする場合、同じボタンを使用してモーダルを表示するために使用していたビデオを再生すると、動作しないため、これを使用しました：

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

注：？autoplay = 1＆が配置されている場所と、次のプロパティの前に「＆」を使用して、一時停止を継続できるようにします。

9
namretiolnave

この投稿を単純に過大評価して、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>
5
Aleksander Dudek

最も簡単な方法は

var frame = document.getElementById("iframeid");
frame.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
4
imal hasaranga perera
$('#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>
1
Jomin George Paul

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">&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年11月の時点で機能するはずです。

1
CPHPython

これが純粋な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":""}', '*');
}

});
1
pingle60

タブビューを終了するとき、またはIonicアプリ を最小化するときにiframe youtubeビデオを一時停止または停止する方法も参照してください。

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

誰かがjQueryを使用せずにビデオを停止したい場合は、簡単にできます：

iframe.src = '';

欠点は、URLを追跡する必要があることです。ただし、通常、各再生ボタンには動画のURLが保存されるため、これは問題になりません。

0
Víctor Navarro