Comment mettre en pause un lecteur YouTube lorsque vous cachez l'iframe?

j'ai un div caché contenant une vidéo YouTube dans un <iframe> . Lorsque l'utilisateur clique sur un lien, ce div devient visible, l'utilisateur doit alors être en mesure de lire la vidéo.

Lorsque l'utilisateur ferme le panneau, la vidéo devrait arrêter la lecture. Comment puis-je y parvenir?

Code: 

<!-- link to open popupVid -->
<p><a href="javascript:;" onClick="document.getElementById('popupVid').style.display='';">Click here</a> to see my presenting showreel, to give you an idea of my style - usually described as authoritative, affable and and engaging.</p>

<!-- popup and contents -->
<div id="popupVid" style="position:absolute;left:0px;top:87px;width:500px;background-color:#D05F27;height:auto;display:none;z-index:200;">

  <iframe width="500" height="315" src="http://www.youtube.com/embed/T39hYJAwR40" frameborder="0" allowfullscreen></iframe>

  <br /><br /> 
  <a href="javascript:;" onClick="document.getElementById('popupVid').style.display='none';">
  close
  </a>
</div><!--end of popupVid -->
83
demandé sur Rob W 2011-12-29 16:28:14

14 réponses

la façon la plus facile de mettre en œuvre ce comportement est d'appeler les méthodes pauseVideo et playVideo , si nécessaire. Inspiré par le résultat de ma réponse précédente , j'ai écrit une fonction sans plugin pour atteindre le comportement désiré.

Les seuls ajustements:

  • j'ai ajouté une fonction, toggleVideo
  • j'ai ajouté ?enablejsapi=1 à L'URL de YouTube, pour activer le caractéristique

Demo: http://jsfiddle.net/ZcMkt/

Code: 

<script>
function toggleVideo(state) {
    // if state == 'hide', hide. Else: show video
    var div = document.getElementById("popupVid");
    var iframe = div.getElementsByTagName("iframe")[0].contentWindow;
    div.style.display = state == 'hide' ? 'none' : '';
    func = state == 'hide' ? 'pauseVideo' : 'playVideo';
    iframe.postMessage('{"event":"command","func":"' + func + '","args":""}', '*');
}
</script>

<p><a href="javascript:;" onClick="toggleVideo();">Click here</a> to see my presenting showreel, to give you an idea of my style - usually described as authoritative, affable and and engaging.</p>

<!-- popup and contents -->
<div id="popupVid" style="position:absolute;left:0px;top:87px;width:500px;background-color:#D05F27;height:auto;display:none;z-index:200;">
   <iframe width="500" height="315" src="http://www.youtube.com/embed/T39hYJAwR40?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
   <br /><br />
   <a href="javascript:;" onClick="toggleVideo('hide');">close</a>
173
répondu Rob W 2017-05-23 12:18:01

Voici un jQuery prendre sur RobW de réponse pour une utilisation cacher /suspension d'une iframe dans une fenêtre modale: 

    function toggleVideo(state) {
        if(state == 'hide'){
            $('#video-div').modal('hide');
            document.getElementById('video-iframe'+id).contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
        }
        else {
            $('#video-div').modal('show');
            document.getElementById('video-iframe'+id).contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
        }
    }

les éléments html mentionnés sont le div modal lui-même (#video-div) appelant les méthodes show / hide, et l'iframe (#video-iframe) qui a l'url vidéo comme est src="" et a le suffixe enabljsapi=1? qui permet le contrôle programmatique du Joueur (ex. .

pour plus de détails sur le html, voir la réponse de RobW.

23
répondu DrewT 2013-12-06 00:14:53

voici un simple jQuery snippet pour mettre en pause toutes les vidéos sur la page basée sur les réponses de Robw's et DrewT: 

jQuery("iframe").each(function() {
  jQuery(this)[0].contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*')
});
15
répondu quartarian 2015-10-23 22:30:44

Hé un moyen facile est de simplement mettre le src de la vidéo à rien, de sorte que la vidéo va se désactiver pendant qu'elle est cachée, puis mettre le src de nouveau à la vidéo que vous voulez quand vous cliquez sur le lien qui ouvre la vidéo.. pour ce faire, définissez simplement un id à l'iframe youtube et appelez la fonction src en utilisant cet id comme ceci: 

<script type="text/javascript">
function deleteVideo()
{
document.getElementById('VideoPlayer').src='';
}

function LoadVideo()
{
document.getElementById('VideoPlayer').src='http://www.youtube.com/embed/WHAT,EVER,YOUTUBE,VIDEO,YOU,WHANT';
}
</script>

<body>

<p onclick="LoadVideo()">LOAD VIDEO</P>
<p onclick="deleteVideo()">CLOSE</P>

<iframe id="VideoPlayer" width="853" height="480" src="http://www.youtube.com/WHAT,EVER,YOUTUBE,VIDEO,YOU,HAVE" frameborder="0" allowfullscreen></iframe>

</boby>
9
répondu Paula 2012-08-17 19:21:09

puisque vous devez définir ?enablejsapi=true dans le src de l'iframe avant de pouvoir utiliser les commandes playVideo / pauseVideo mentionnées dans autres réponses , il pourrait être utile d'ajouter cette programmatically via Javascript (especially if, eg. vous voulez que ce comportement s'applique aux vidéos intégrées par d'autres utilisateurs qui viennent de couper et coller un code d'intégration YouTube). Dans ce cas, quelque chose comme ceci pourrait être utile: 

function initVideos() {

  // Find all video iframes on the page:
  var iframes = $(".video").find("iframe");

  // For each of them:
  for (var i = 0; i < iframes.length; i++) {
    // If "enablejsapi" is not set on the iframe's src, set it:
    if (iframes[i].src.indexOf("enablejsapi") === -1) {
      // ...check whether there is already a query string or not:
      // (ie. whether to prefix "enablejsapi" with a "?" or an "&")
      var prefix = (iframes[i].src.indexOf("?") === -1) ? "?" : "&amp;";
      iframes[i].src += prefix + "enablejsapi=true";
    }
  }
}

...si vous appelez cela sur document.ready alors toutes les iframes dans un div avec une classe de" video "auront enablejsapi=true ajouté à leur source, ce qui permet aux commandes playVideo / pauseVideo de fonctionner sur eux.

(nb. cet exemple utilise jQuery pour cette ligne qui définit var iframes , mais l'approche générale devrait fonctionner aussi bien avec Javascript pur si vous n'utilisez pas jQuery).

6
répondu Nick F 2017-05-23 12:26:07

vous pouvez arrêter la vidéo en appelant la méthode stopVideo() sur L'instance du lecteur YouTube avant de cacher le div par exemple 

player.stopVideo()

pour plus de détails voir ici: http://code.google.com/apis/youtube/js_api_reference.html#Playback_controls

5
répondu david 2011-12-29 13:14:12

Robw's way a bien fonctionné pour moi. Pour les utilisateurs de jQuery voici une version simplifiée que j'ai fini par utiliser: 

var iframe = $(video_player_div).find('iframe');

var src = $(iframe).attr('src');      

$(iframe).attr('src', '').attr('src', src);

Dans cet exemple "video_player" est un div parent contenant l'iframe.

4
répondu skribbz14 2015-05-04 16:38:23

je voulais partager une solution que j'ai trouvé en utilisant jQuery qui fonctionne si vous avez plusieurs vidéos YouTube intégrés sur une seule page. Dans mon cas, j'ai défini un popup modal pour chaque vidéo comme suit: 

<div id="videoModalXX">
...
    <button onclick="stopVideo(videoID);" type="button" class="close"></button>
    ...
    <iframe width="90%" height="400" src="//www.youtube-nocookie.com/embed/video_id?rel=0&enablejsapi=1&version=3" frameborder="0" allowfullscreen></iframe>
...
</div>

dans ce cas, videoModalXX représente un id unique pour la vidéo. Ensuite, la fonction suivante arrête la vidéo: 

function stopVideo(id)
{
    $("#videoModal" + id + " iframe")[0].contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
}

j'aime cette approche parce qu'elle garde la vidéo en pause où vous vous êtes arrêté au cas où vous souhaitez revenir en arrière et continuer à regarder plus tard. Il fonctionne bien pour moi parce qu'il est à la recherche de l'iframe à l'intérieur du modal vidéo avec un id spécifique. Aucun ID D'élément YouTube spécial n'est requis. J'espère que quelqu'un trouvera cela aussi utile.

4
répondu Poldon 2015-08-13 20:30:32

il suffit de supprimer src De iframe 

$('button.close').click(function(){
    $('iframe').attr('src','');;
});
2
répondu rakesh kejriwal 2016-12-19 12:19:23

Rob W answer m'a aidé à trouver comment mettre en pause une vidéo sur iframe quand un slider est caché. Pourtant, j'avais besoin de quelques modifications avant de pouvoir le faire fonctionner. Voici un extrait de mon html: 

<div class="flexslider" style="height: 330px;">
  <ul class="slides">
    <li class="post-64"><img src="http://localhost/.../Banner_image.jpg"></li>
    <li class="post-65><img  src="http://localhost/..../banner_image_2.jpg "></li>
    <li class="post-67 ">
        <div class="fluid-width-video-wrapper ">
            <iframe frameborder="0 " allowfullscreen=" " src="//www.youtube.com/embed/video-ID?enablejsapi=1 " id="fitvid831673 "></iframe>
        </div>
    </li>
  </ul>
</div>

Observe que cela fonctionne sur localhosts et aussi comme Rob W mentionné " enabljsapi=1 " a été ajouté à la fin de l'URL de la vidéo.

Voici mon fichier JS: 

jQuery(document).ready(function($){
    jQuery(".flexslider").click(function (e) {
        setTimeout(checkiframe, 1000); //Checking the DOM if iframe is hidden. Timer is used to wait for 1 second before checking the DOM if its updated

    });
});

function checkiframe(){
    var iframe_flag =jQuery("iframe").is(":visible"); //Flagging if iFrame is Visible
    console.log(iframe_flag);
    var tooglePlay=0;
    if (iframe_flag) {                                //If Visible then AutoPlaying the Video
        tooglePlay=1;
        setTimeout(toogleVideo, 1000);                //Also using timeout here
    }
    if (!iframe_flag) {     
        tooglePlay =0;
        setTimeout(toogleVideo('hide'), 1000);  
    }   
}

function toogleVideo(state) {
    var div = document.getElementsByTagName("iframe")[0].contentWindow;
    func = state == 'hide' ? 'pauseVideo' : 'playVideo';
    div.postMessage('{"event":"command","func":"' + func + '","args":""}', '*');
};

aussi, comme un exemple plus simple, vérifier ce sur JSFiddle

1
répondu Fahim 2014-09-15 15:27:51

les réponses de RobW ici et ailleurs ont été très utiles, mais j'ai trouvé mes besoins beaucoup plus simples. J'ai répondu à cette ailleurs , mais peut-être qu'il sera utile ici aussi.

j'ai une méthode où je forme une chaîne HTML à charger dans UIWebView: 

NSString *urlString = [NSString stringWithFormat:@"https://www.youtube.com/embed/%@",videoID];

preparedHTML = [NSString stringWithFormat:@"<html><body style='background:none; text-align:center;'><script type='text/javascript' src='http://www.youtube.com/iframe_api'></script><script type='text/javascript'>var player; function onYouTubeIframeAPIReady(){player=new YT.Player('player')}</script><iframe id='player' class='youtube-player' type='text/html' width='%f' height='%f' src='%@?rel=0&showinfo=0&enablejsapi=1' style='text-align:center; border: 6px solid; border-radius:5px; background-color:transparent;' rel=nofollow allowfullscreen></iframe></body></html>", 628.0f, 352.0f, urlString];

vous pouvez ignorer le style dans la chaîne preparedHTML. Les aspects importants sont:

  • utilisant L'API pour créer le " YT.le joueur" de l'objet. À un moment donné, je n'avais que la vidéo dans la balise iFrame et cela m'a empêché de faire référence à l'objet "player" plus tard avec JS.
  • j'ai vu quelques exemples sur le web où la première balise de script (celle avec la balise iframe_scrapi) est omise, mais j'en avais vraiment besoin pour que cela fonctionne.
  • création de la variable" player " Au début du script API. J'ai également vu quelques exemples qui ont omis qui ligne.
  • ajout d'une balise id à l'iFrame à référencer dans le script API. J'ai presque oublié cette partie.
  • ajout de" enabljsapi=1 " à la fin de la balise src iFrame. Que moi accroché pendant un moment, j'ai d'abord eu comme un attribut de la balise iFrame, qui ne fonctionne pas/ne fonctionne pas pour moi.

quand j'ai besoin de mettre en pause la vidéo, je lance juste ceci: 

[webView stringByEvaluatingJavaScriptFromString:@"player.pauseVideo();"];

Espère que ça aide!

0
répondu Brian 2017-05-23 12:26:07

ça me va très bien avec YT player 

 createPlayer(): void {
  return new window['YT'].Player(this.youtube.playerId, {
  height: this.youtube.playerHeight,
  width: this.youtube.playerWidth,
  playerVars: {
    rel: 0,
    showinfo: 0
  }
});
}

.YouTube.joueur.pauseVideo ();

0
répondu HuyLe 2017-09-13 00:51:18

Cette approche nécessite jQuery. Tout d'abord, sélectionnez votre iframe: 

var yourIframe = $('iframe#yourId');
//yourId or something to select your iframe.

maintenant vous sélectionnez le bouton Lecture / pause de cette iframe et cliquez dessus 

$('button.ytp-play-button.ytp-button', yourIframe).click();

j'espère que ça vous aidera.

0
répondu Ｈｏｎｇａｒｃ 2017-10-11 14:04:21

plus concis, élégant et sécurisé réponse: ajouter "?enablejsapi=1" à la fin de L'URL de la vidéo, puis construire et stringifier un objet ordinaire représentant la commande pause: 

const YouTube_pause_video_command_JSON = JSON.stringify(Object.create(null, {
    "event": {
        "value": "command",
        "enumerable": true
    },
    "func": {
        "value": "pauseVideo",
        "enumerable": true
    }
}));

utilisez la méthode Window.postMessage pour envoyer la chaîne JSON résultante à la vidéo intégrée document: 

// |iframe_element| is defined elsewhere.
const video_URL = iframe_element.getAttributeNS(null, "src");
iframe_element.contentWindow.postMessage(YouTube_pause_video_command_JSON, video_URL);

assurez-vous de spécifier L'URL de la vidéo pour l'argument Window.postMessage de la méthode targetOrigin pour vous assurer que vos messages ne seront pas envoyé à tout destinataire non intentionnel.

0
répondu Patrick Dark 2017-10-21 14:59:53