Stopper vidéo youtube fermeture popup Jquery

mistermef · 20/09/2011, 10h00

Bonjour à tous,

Un grand merci pour ce forum et tout ces cours... je sens que je vais devenir un gros Fan de ce Forum.

Mon problème est que j'ai crée une popup jquery avec à l'intérieur une vidéo intégrée youtube. Tout fonctionne sauf que quand le clip est lancé et que je ferme la popup il continue de tourner. J'ai trouvé plusieurs solutions quand à la fermeture de cette vidéo, mais apparement ça fonctionnait avec l'ancien code youtube ( et non l'iframe )

comment faire pour stopper cette vidéo quand je ferme ma popup ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
 
Voici le jquery de ma popup
    $(document).ready(function() {
 
        //select all the a tag with name equal to modal
        $('a[name=modal]').click(function(e) {
            //Cancel the link behavior
            e.preventDefault();
            //Get the A tag
            var id = $(this).attr('href');
 
            //Get the screen height and width
            var maskHeight = $(document).height();
            var maskWidth = $(window).width();
 
            //Set height and width to mask to fill up the whole screen
            $('#mask').css({'width':maskWidth,'height':maskHeight});
 
            //transition effect    
            $('#mask').fadeIn(1000);  
            $('#mask').fadeTo("slow",0.8);
 
            //Get the window height and width
            var winH = $(window).height();
            var winW = $(window).width();
 
            //Set the popup window to center
            $(id).css('top',  winH/2-$(id).height()/2);
            $(id).css('left', winW/2-$(id).width()/2);
 
            //transition effect
            $(id).fadeIn(2000);
 
        });
 
        //if close button is clicked
        $('.window .close').click(function (e) {
            //Cancel the link behavior
            e.preventDefault();
            $('#mask, .window').hide();
        });    
 
        //if mask is clicked
        $('#mask').click(function () {
            $(this).hide();
            $('.window').hide();
        });        
 
    });

Voici le contenu de ma popup

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
    <div id="img-big" class="window">
             <iframe width="560" height="315" src="http://www.youtube.com/embed/FosDa000OHI" frameborder="0" allowfullscreen></iframe>
            <a href="#" class="close">Close</a>
            <div class="social-pop">
                    <p>You like this ?</p>
                    <span class="facebook"><iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.youtube.com%2Fembed%2FFosDa000OHI&amp;send=false&amp;layout=standard&amp;width=290&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font&amp;height=30" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:290px; height:30px;" allowTransparency="true"></iframe></span>
                    <span class="share-on">SHARE <br />IT ON</span>
                    <span class="facebook-share"><img src="images/media/facebook.png" width="28" height="28" target="_blank"></span>
                    <span class="twitter"><img src="images/media/twitter.png" width="28" height="28" target="_blank"></span>
                    <span class="mail"><img src="images/media/mail.png" width="28" height="28" target="_blank"></span>     
            </div>
        </div>

Et voilà le lien qui ouvre cette popup

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div class="img big">
	<a href="#img-big" name="modal"><img src="images/media/clip-goodbye.png" width="352" height="263" class="imgbig"></a>
</div>

Merci à tous pour les futures réponses !!

MrPringle · 20/09/2011, 11h24

Le plus simple est d'utiliser l'API iframe Youtube pour faire ce genre de choses.

mistermef · 20/09/2011, 12h04

Et je pourrais toujours utiliser ma popup jquery ? ou c'est carrément l'api Youtube qui va la gérer ?

car je n'ai pas que youtube dans cette popup..j'ai du contenu html avec que je dois garder en popup !

MrPringle · 20/09/2011, 12h52

Oui tout à fait, en fait l'API te permet d'avoir le contrôle sur la partie Youtube seulement, tu crée l'objet en JS et tu peux ensuite interagir avec : pause, stop...

mistermef · 20/09/2011, 18h23

Ah ok cool merci MrPringle je vais tester ça et je reviendrais dire si ça a fonctionné pour moi ou pas ^^

Merci encore

mistermef · 20/09/2011, 19h10

Bon me revoilà après avoir testé cette API ^^

Ca fonctionne niquel pour une popup ! J'ai bidouillé un peu l'API pour éviter que la vidéo ne se lance toute seule et se coupe au bout de 6 secondes ( comme sur la doc que tu m'as filé )

Donc c'est niquel quand je sors de ma popup ca coupe la zik etc niquel.

Maintenant .. j'ai un nouveau problème :

Comme j'ai plusieurs popup, et que le code de l'api est long, j'ai séparé ça dans un fichier que j'ai include dans ma popup. jusque là tout va bien ! Le truc c'est quand je mets l'API sur plusieurs POPOP c'est le bordel..

Tout mes clips youtube se mettent sur la même popup ( la première ) et les contenus n'ont rien à voir avec ce que j'ai importé.

Voilà le code de mes popup :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
 
<div id="img-big" class="window">
	 <?php include('include/clip-goodbye.php'); ?>
	<a href="#" class="close">Close</a>
	<div class="social-pop">
		<p>You like this ?</p>
		<span class="facebook"><iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.youtube.com%2Fembed%2FFosDa000OHI&amp;send=false&amp;layout=standard&amp;width=290&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font&amp;height=30" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:290px; height:30px;" allowTransparency="true"></iframe></span>
		<span class="share-on">SHARE <br />IT ON</span>
		<span class="facebook-share"><img src="images/media/facebook.png" width="28" height="28" target="_blank"></span>
		<span class="twitter"><img src="images/media/twitter.png" width="28" height="28" target="_blank"></span>
		<span class="mail"><img src="images/media/mail.png" width="28" height="28" target="_blank"></span>	
	</div>
    </div>
    <div id="img-small1" class="window">
	 <?php include('include/clip-illtry.php'); ?>
	<a href="#" class="close">Close</a>
	<div class="social-pop">
		<p>You like this ?</p>
		<span class="facebook"><iframe src="//www.facebook.com/plugins/like.php?app_id=248362068540971&amp;href=http%3A%2F%2Fwww.youtube.com%2Fembed%2F-3jJZPQF_BQ&amp;send=false&amp;layout=standard&amp;width=290&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font&amp;height=30" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:290px; height:30px;" allowTransparency="true"></iframe></span>
		<span class="share-on">SHARE <br />IT ON</span>
		<span class="facebook-share"><img src="images/media/facebook.png" width="28" height="28" target="_blank"></span>
		<span class="twitter"><img src="images/media/twitter.png" width="28" height="28" target="_blank"></span>
		<span class="mail"><img src="images/media/mail.png" width="28" height="28" target="_blank"></span>	
	</div>
    </div>
    <div id="img-small2" class="window">
	 <?php include('include/clip-teaser.php'); ?>
	<a href="#" class="close">Close</a>
	<div class="social-pop">
		<p>You like this ?</p>
		<span class="facebook"><iframe src="//www.facebook.com/plugins/like.php?app_id=248362068540971&amp;href=http%3A%2F%2Fwww.youtube.com%2Fembed%2FvuxMj90wyGU&amp;send=false&amp;layout=standard&amp;width=290&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font&amp;height=30" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:290px; height:30px;" allowTransparency="true"></iframe></span>
		<span class="share-on">SHARE <br />IT ON</span>
		<span class="facebook-share"><img src="images/media/facebook.png" width="28" height="28" target="_blank"></span>
		<span class="twitter"><img src="images/media/twitter.png" width="28" height="28" target="_blank"></span>
		<span class="mail"><img src="images/media/mail.png" width="28" height="28" target="_blank"></span>	
	</div>
    </div>
    <div id="img-small3" class="window">
	 <?php include('include/clip-ocko.php'); ?>
	<a href="#" class="close">Close</a>
	<div class="social-pop">
		<p>You like this ?</p>
		<span class="facebook"><iframe src="//www.facebook.com/plugins/like.php?app_id=248362068540971&amp;href=http%3A%2F%2Fwww.youtube.com%2Fembed%2Fk33C0P9y6c8&amp;send=false&amp;layout=standard&amp;width=290&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font&amp;height=30" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:290px; height:30px;" allowTransparency="true"></iframe></span>
		<span class="share-on">SHARE <br />IT ON</span>
		<span class="facebook-share"><img src="images/media/facebook.png" width="28" height="28" target="_blank"></span>
		<span class="twitter"><img src="images/media/twitter.png" width="28" height="28" target="_blank"></span>
		<span class="mail"><img src="images/media/mail.png" width="28" height="28" target="_blank"></span>	
	</div>
    </div>
    <div id="img-small4" class="window">
	 <?php include('include/clip-dontcry.php'); ?>
	<a href="#" class="close">Close</a>
	<div class="social-pop">
		<p>You like this ?</p>
		<span class="facebook"><iframe src="//www.facebook.com/plugins/like.php?app_id=248362068540971&amp;href=http%3A%2F%2Fwww.youtube.com%2Fembed%2FTckzqcbglvQ&amp;send=false&amp;layout=standard&amp;width=290&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font&amp;height=30" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:290px; height:30px;" allowTransparency="true"></iframe></span>
		<span class="share-on">SHARE <br />IT ON</span>
		<span class="facebook-share"><img src="images/media/facebook.png" width="28" height="28" target="_blank"></span>
		<span class="twitter"><img src="images/media/twitter.png" width="28" height="28" target="_blank"></span>
		<span class="mail"><img src="images/media/mail.png" width="28" height="28" target="_blank"></span>	
	</div>
    </div>

Voici le contenu d'une des vidéo include avec l'api http://pastebin.com/4FJnQMns

Les autres pages sont identiques mise à part l'ID de la vidéo.. !

On y est presque !

MrPringle · 20/09/2011, 22h53

Tu devrais inclure le code dans la page mère.

Pour gérer l'ensemble des vidéos, au lieu d'une variable "simple", j'utiliserais un objet :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
{
"id_video1": "la_video1",
"id_video2": "la_video2"
...
}

Pour ne pas surcharger, tu le crées vide et à chaque fois qu'une vidéo est appelée, tu l'initialise à la volée avec l'API, tu la places dans ta popup et voilà. Si elle est rappelée, tu affiches l'objet précédemment créé. A la fermeture, tu la stoppes et tu la "caches".

mistermef · 21/09/2011, 22h37

Ok merci mrPringle, je vais tester de ce côté mais je reviendrais sûrement car je doute m'en sortir j'ai pas bien compris ^^

On va tenter.

mistermef · 21/09/2011, 22h54

Ouais en fait je n'y comprends rien en JS :/

Citation:

Pour ne pas surcharger, tu le crées vide et à chaque fois qu'une vidéo est appelée, tu l'initialise à la volée avec l'API, tu la places dans ta popup et voilà. Si elle est rappelée, tu affiches l'objet précédemment créé. A la fermeture, tu la stoppes et tu la "caches".

Là je suis largué :/

MrPringle · 24/09/2011, 02h46

Tu crées un objet vide

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
var mesVideos = {};

La vidéo "id_de_ta_video" est appelée, tu vérifies si l'objet "mesVideos" contient "id_de_ta_video", si ce n'est pas le cas, tu crée la vidéo associée avec l'API.
Tu stockes ensuite l'objet crée :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
mesVideos.id_de_ta_video = la_video_que_tu_viens_de_créer

La vidéo "id_de_ta_video" est appelée de nouveau, dans ce cas tu la trouves dans l'objet "mesVideos" et utilise directement "mesVideos.id_de_ta_video".

C'est plus clair ?

mistermef · 26/09/2011, 21h14

En théorie oui, mais en pratique je n'y arrive pas

MrPringle · 26/09/2011, 22h04

Sur quelle partie tu bloques ?
Tu arrives à afficher une première fois une vidéo avec ce "système" ?

mistermef · 26/09/2011, 23h43

Et bien je n'y connais rien en js et qs, donc difficile de bien placer les objets vides, de vérifier des conditions etc..

Je dois entamer une formation bientôt mais pour le moment j'ai besoin de cette fonction. Donc dur dur

MrPringle · 27/09/2011, 00h10

Tu peux poster ton code actuel pour une vidéo crée avec l'API ? Le dernier code qui fonctionne en fait.

mistermef · 27/09/2011, 10h10

Salut MrPringle ^^

J'ai recommencé mon code à partir des codes Youtube. J'ai refait le tout pour n'avoir que les popup et youtube ( pour tester quoi )

J'ai tenté de juste mettre le même clip dans 2 popup diff cette fois ci .. marche pas non plus :s

La page : http://pastebin.com/Wb04rQmy

Le JS : http://pastebin.com/8CbFRKnG

Le css : http://pastebin.com/VUj8rDz9

C'est vraiment le moment pour moi d'entamer cette fucking formation !!

20/09/2011, 11h24	#2
MrPringle Membre habitué Mathias Philippe Développeur Web Inscription : septembre 2011 Messages : 75 Détails du profil Informations personnelles : Nom : Mathias Philippe Localisation : Philippines Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : septembre 2011 Messages : 75 Points : 121 Points : 121	Le plus simple est d'utiliser l'API iframe Youtube pour faire ce genre de choses.
	10

20/09/2011, 12h04	#3
mistermef Invité de passage Inscription : septembre 2011 Messages : 9 Détails du profil Informations personnelles : Sexe : Localisation : France Informations forums : Inscription : septembre 2011 Messages : 9 Points : 0 Points : 0	Et je pourrais toujours utiliser ma popup jquery ? ou c'est carrément l'api Youtube qui va la gérer ? car je n'ai pas que youtube dans cette popup..j'ai du contenu html avec que je dois garder en popup !
	00

20/09/2011, 12h52	#4
MrPringle Membre habitué Mathias Philippe Développeur Web Inscription : septembre 2011 Messages : 75 Détails du profil Informations personnelles : Nom : Mathias Philippe Localisation : Philippines Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : septembre 2011 Messages : 75 Points : 121 Points : 121	Oui tout à fait, en fait l'API te permet d'avoir le contrôle sur la partie Youtube seulement, tu crée l'objet en JS et tu peux ensuite interagir avec : pause, stop...
	00

20/09/2011, 18h23	#5
mistermef Invité de passage Inscription : septembre 2011 Messages : 9 Détails du profil Informations personnelles : Sexe : Localisation : France Informations forums : Inscription : septembre 2011 Messages : 9 Points : 0 Points : 0	Ah ok cool merci MrPringle je vais tester ça et je reviendrais dire si ça a fonctionné pour moi ou pas ^^ Merci encore
	00

21/09/2011, 22h37	#8
mistermef Invité de passage Inscription : septembre 2011 Messages : 9 Détails du profil Informations personnelles : Sexe : Localisation : France Informations forums : Inscription : septembre 2011 Messages : 9 Points : 0 Points : 0	Ok merci mrPringle, je vais tester de ce côté mais je reviendrais sûrement car je doute m'en sortir j'ai pas bien compris ^^ On va tenter.
	00

26/09/2011, 21h14	#11
mistermef Invité de passage Inscription : septembre 2011 Messages : 9 Détails du profil Informations personnelles : Sexe : Localisation : France Informations forums : Inscription : septembre 2011 Messages : 9 Points : 0 Points : 0	En théorie oui, mais en pratique je n'y arrive pas
	00

26/09/2011, 22h04	#12
MrPringle Membre habitué Mathias Philippe Développeur Web Inscription : septembre 2011 Messages : 75 Détails du profil Informations personnelles : Nom : Mathias Philippe Localisation : Philippines Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : septembre 2011 Messages : 75 Points : 121 Points : 121	Sur quelle partie tu bloques ? Tu arrives à afficher une première fois une vidéo avec ce "système" ?
	00

26/09/2011, 23h43	#13
mistermef Invité de passage Inscription : septembre 2011 Messages : 9 Détails du profil Informations personnelles : Sexe : Localisation : France Informations forums : Inscription : septembre 2011 Messages : 9 Points : 0 Points : 0	Et bien je n'y connais rien en js et qs, donc difficile de bien placer les objets vides, de vérifier des conditions etc.. Je dois entamer une formation bientôt mais pour le moment j'ai besoin de cette fonction. Donc dur dur
	00

27/09/2011, 00h10	#14
MrPringle Membre habitué Mathias Philippe Développeur Web Inscription : septembre 2011 Messages : 75 Détails du profil Informations personnelles : Nom : Mathias Philippe Localisation : Philippines Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : septembre 2011 Messages : 75 Points : 121 Points : 121	Tu peux poster ton code actuel pour une vidéo crée avec l'API ? Le dernier code qui fonctionne en fait.
	00

27/09/2011, 10h10	#15
mistermef Invité de passage Inscription : septembre 2011 Messages : 9 Détails du profil Informations personnelles : Sexe : Localisation : France Informations forums : Inscription : septembre 2011 Messages : 9 Points : 0 Points : 0	Salut MrPringle ^^ J'ai recommencé mon code à partir des codes Youtube. J'ai refait le tout pour n'avoir que les popup et youtube ( pour tester quoi ) J'ai tenté de juste mettre le même clip dans 2 popup diff cette fois ci .. marche pas non plus :s La page : http://pastebin.com/Wb04rQmy Le JS : http://pastebin.com/8CbFRKnG Le css : http://pastebin.com/VUj8rDz9 C'est vraiment le moment pour moi d'entamer cette fucking formation !!
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email