Arrêter la vidéo YouTube dans iFrame en cliquant sur un bouton externe

Je sais qu’il existe des questions similaires à ce sujet, mais je n’ai pas encore réussi à le faire fonctionner.

Ce code montre une vidéo YouTube qui se trouve dans un iframe. Lorsque vous cliquez sur un bouton (emsbinstartbutton), la vidéo est masquée et remplacée par un espace réservé. Si cet espace threebytwo ( threebytwo ) est fermé, la vidéo devrait s’afficher à nouveau.

Pour le moment, cela fonctionne bien, sauf que lorsque la vidéo est masquée, la lecture continue (vous pouvez entendre le son et lorsque vous revenez en arrière, vous pouvez voir qu’il est toujours en cours de lecture). La vidéo doit être arrêtée lorsqu’elle est masquée.

  <%@ Page Language="C#" MasterPageFile="~/Views/Shared/Widget.Master" Inherits="System.Web.Mvc.ViewPage" %>         // when they click on the buy now button we will hide the title and show the widget //detach work to stop vid but can t get it back..... $(document).ready(function () { $("#emsbinstartbutton").click(function () { $("#divbuyonlineVid").hide(); $(".divbuyonlineVid").hide(); $("#threebytwo").show(); }); }); // when they click on the x the widget should be hidden and the video shows again $(document).ready(function () { $("#closebtn").click(function () { $("#divbuyonlineVid").show(); $(".divbuyonlineVid").show(); $("#threebytwo").hide(); }); });    #threebytwo { display: none; } #emsbin2startbutton { cursor: pointer; }    
    alt="" /> 
  
 
 
  
 
       
 
 
    

J’ai essayé ce qui suit:

• Analyse HTML – Obtenir des données d’une table à l’intérieur d’un div?
• Détecter si iOS utilise webapp
• Comment présélectionner une option dans une zone de sélection à l’aide de jQuery
• CSS Zoom to Fit hauteur et largeur (Stretch)
• CSS background-position animate de droite à gauche

en utilisant .detach et append

  // when they click on the buy now button we will hide the title and show the widget //detach work to stop vid but can t get it back..... $(document).ready(function () { $("#emsbinstartbutton").click(function () { $holdera = $("#divbuyonlineVid").detach(); $holderb = $(".divbuyonlineVid").detach(); $("#threebytwo").show(); }); }); // when they click on the x the widget should be hidden and the video shows again $(document).ready(function () { $("#closebtn").click(function () { $("#threebytwo").hide(); alert($holdera); $("#divbuyonlineVid").append($holdera); alert($holderb); $(".divbuyonlineVid").append($holderb); }); }); 

Même si la vidéo s’arrête au clic, lorsque j’essaie de revenir en arrière (ajout), une erreur d’object s’affiche.

Stop et StopVideo

Donc dans l’iframe, en ajoutant &enablejsapi=1 :

et dans le jQuery:

  $(document).ready(function () { $("#emsbinstartbutton").click(function () { $holdera = $("#divbuyonlineVid").hide(); $holderb = $(".divbuyonlineVid").hide(); $("#player").stop(); $("#threebytwo").show(); }); }); 

Ce qui ne change rien. Et aussi:

  $(document).ready(function () { $("#emsbinstartbutton").click(function () { $("#divbuyonlineVid").hide(); $(".divbuyonlineVid").hide(); $("#player").stopvideo(); $("#threebytwo").show(); }); }); 

Cliquez sur le bouton pour entendre le son, mais trois sur deux ne s’affichent pas.

J’ai aussi ajouté ce :

Quelqu’un peut-il me diriger dans la bonne direction ou voir où je me trompe?

Edit: shabeer90 explique comment arrêter la vidéo youtube qui m’a mis sur la route, mais si vous souhaitez simplement la suspendre et la conserver en arrière-plan, le code suivant peut être utile:

jQuery:

   $(document).ready(function () { var obj = $('object') .wrap('
') .find('embed').attr('src', function (i, s) { return s + '&enablejsapi=1&version=3' }).end() .find('param[name=movie]').attr('value', function (i, v) { return v + '&enablejsapi=1&version=3' }).end() .detach() .appendTo($('#test')); $(document).ready(function () { $("#emsbinstartbutton").click(function () { //Then assign the src to null, this then stops the video been playing obj.find('embed')[0].pauseVideo(); $("body").append($("
").css({ position: "fixed" , width: "640px" , height: "425px" , "background-color": "#000" , opacity: 0.6 , "z-index": 999 , top: 0 , left: 0 }).attr("id", "page-cover")); $("#threebytwo").show(); }); }); // when they click on the x the widget should be hidden and the video shows again $(document).ready(function () { $("#closebtn").click(function () { // $("#divbuyonlineVid").show(); // $(".divbuyonlineVid").show(); $("#threebytwo").hide(); $("#page-cover").detach(); }); }); });  

html:

Merci beaucoup.

• Les méthodes val () et prop () de jQuery utilisent-elles des valeurs html-escape?
• Aperçu de l’image avant le téléchargement dans IE et Chrome
• comment réinitialiser la position de défilement dans une div en utilisant javascript
• Utiliser l’événement «slide» Bootstrap Carousel et la classe .next
• Déclencher une fonction lorsqu’un élément est activé / désactivé

 //First get the iframe URL var url = $('#YourIFrameID').attr('src'); //Then assign the src to null, this then stops the video been playing $('#YourIFrameID').attr('src', ''); // Finally you reasign the URL back to your iframe, so when you hide and load it again you still have the link $('#YourIFrameID').attr('src', url); 

 var stopButton = document.getElementById('video-close-button-id'); stopButton.onclick = function() { var myPlayer = document.getElementById("youtube-player-id"); myPlayer.setAtsortingbute("src", " "); }; 

  Example Video Modal  
 
 
This modal has video
 
  
  ×  
  

 function destroyVideo(){ var url = $('#youtubePlayer').attr('src'); $('#youtubePlayer').attr('src', ''); $('#youtubePlayer').attr('src', url); }