web-dev-qa-db-de.com

Stoppen Sie eingebettete YouTube Iframe?

Ich verwende YouTube iframe, um Videos auf meiner Website einzubetten.

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

Und ich habe mehrere Videos auf der gleichen Seite.

Ich möchte alle oder einen von ihnen mit einem Klick auf eine Schaltfläche mit Javascript oder so stoppen.

Ist es möglich?

AKTUALISIEREN:

Ich habe versucht, was Talvi Watia sagte und benutzte:

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

Ich erhalte:

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

Möglicherweise möchten Sie die Youtube JavaScript API Referenzdokumente durchsehen.

Wenn Sie Ihre Videos auf der Seite einbetten, müssen Sie diesen Parameter übergeben:

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

Wenn Sie die Schaltfläche Alle Videos anhalten möchten, können Sie eine JavaScript-Routine einrichten, mit der Sie Ihre Videos durchlaufen und anhalten können:

player.stopVideo()

Dies beinhaltet das Verfolgen aller Seiten-IDs für jedes Video auf der Seite. Noch einfacher ist es, eine Klasse zu erstellen und dann jQuery.each zu verwenden.

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

Leider entwickeln sich diese APIs sehr schnell. Ab Mai 2015 funktionieren die vorgeschlagenen Lösungen nicht mehr, da das Player-Objekt keine stopVideo -Methode hat.

Eine zuverlässige Lösung finden Sie auf dieser Seite ( 1 ) und es funktioniert mit:

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

und den folgenden JS/jQuery-Code:

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

Wenn noch jemand nach der Antwort sucht, habe ich sie so gelöst:

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

Dabei ist #photos die ID des Modals und .videoPlayer die Klasse des Iframes. Grundsätzlich wird das src-Attribut aktualisiert (und die Wiedergabe des Videos gestoppt). So,

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

sollte den Trick machen.

29
Jax297

Die Antwort von Talvi funktioniert zwar immer noch, aber die Youtube-Javascript-API wurde als veraltet markiert. Du solltest jetzt die neuere Youtube IFrame API verwenden.

In der Dokumentation finden Sie einige Möglichkeiten zum Einbetten von Videos. Für Ihr Ziel sollten Sie jedoch Folgendes angeben:

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

APIs sind chaotisch, weil sie sich ständig ändern. Diese reine JavaScript-Methode hat bei mir funktioniert:

 <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

Es gibt einen Codepen von einem Benutzer namens "CAPTAIN ANONYMOUS". Es hat bei mir funktioniert - aber ich muss eine Gutschrift geben, wo es fällig ist. - Ich poste hier, weil ich nach der einfachsten Lösung zum Einbetten des YT Video im iframe und ich denke, dass das Posten es jemand anderem hilft, weniger Zeit mit der Suche zu verbringen.

Was ich brauchte war, das Video in einem modalen Fenster erscheinen zu lassen und die Wiedergabe zu stoppen, wenn es geschlossen wurde

also hier ist die Magie: 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":""}', '*');
});

außerdem, wenn Sie möchten, dass es in einem Dom-Objekt, das noch nicht sichtbar ist, wie einem modalen Fenster, AUTOPLAY wird, würde es nicht funktionieren, wenn ich dieselbe Schaltfläche zum Abspielen des Videos verwende, mit dem ich das Modal zeige :

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

Hinweis:? Autoplay = 1 & wo es platziert ist und die Verwendung des '&' vor der nächsten Eigenschaft, damit die Pause weiter funktioniert.

9
namretiolnave

Man kann diesen Beitrag nicht einfach überschätzen und antwortet dem OP und den Helfern. Meine Lösung mit nur video_id Austausch:

<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

Der einfachste Weg ist

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

Für ein Twitter Bootstrap modal/popup mit einem Video darin hat dies für mich funktioniert:

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

Basierend auf Marcos Antwort , beachte, dass ich nur das enablejsapi=1 Parameter zur Video URL (rel=0 dient nur dazu, dass verwandte Videos am Ende nicht angezeigt werden. Die JS postMessage -Funktion macht das ganze schwere Heben, sie stoppt das Video tatsächlich.

Das Snippet zeigt das Video möglicherweise aufgrund von Anforderungsberechtigungen nicht an. In einem regulären Browser sollte dies jedoch ab November 2018 funktionieren.

1
CPHPython

Hier ist eine reine Javascript-Lösung,

<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

siehe auch Wie Sie ein iFrame-YouTube-Video anhalten oder anhalten, wenn Sie eine Tab-Ansicht verlassen oder Ihre Ionic App minimieren

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

Wenn jemand das Video stoppen möchte, ohne jQuery zu verwenden, können Sie einfach:

iframe.src = '';

Der Nachteil ist, dass Sie den Überblick über die URL behalten müssen. In der Regel ist dies jedoch kein Problem, da auf jeder Wiedergabetaste die URL des Videos gespeichert werden sollte.

0
Víctor Navarro