IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Stopper vidéo youtube fermeture popup Jquery


Sujet :

jQuery

  1. #1
    Nouveau Candidat au Club
    Homme Profil pro
    Inscrit en
    Septembre 2011
    Messages
    9
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Septembre 2011
    Messages : 9
    Points : 1
    Points
    1
    Par défaut Stopper vidéo youtube fermeture popup Jquery
    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 !!

  2. #2
    Membre habitué
    Homme Profil pro
    Développeur Web
    Inscrit en
    Septembre 2011
    Messages
    89
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : Philippines

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Septembre 2011
    Messages : 89
    Points : 142
    Points
    142
    Par défaut
    Le plus simple est d'utiliser l'API iframe Youtube pour faire ce genre de choses.

  3. #3
    Nouveau Candidat au Club
    Homme Profil pro
    Inscrit en
    Septembre 2011
    Messages
    9
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Septembre 2011
    Messages : 9
    Points : 1
    Points
    1
    Par défaut
    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 !

  4. #4
    Membre habitué
    Homme Profil pro
    Développeur Web
    Inscrit en
    Septembre 2011
    Messages
    89
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : Philippines

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Septembre 2011
    Messages : 89
    Points : 142
    Points
    142
    Par défaut
    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...

  5. #5
    Nouveau Candidat au Club
    Homme Profil pro
    Inscrit en
    Septembre 2011
    Messages
    9
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Septembre 2011
    Messages : 9
    Points : 1
    Points
    1
    Par défaut
    Ah ok cool merci MrPringle je vais tester ça et je reviendrais dire si ça a fonctionné pour moi ou pas ^^

    Merci encore

  6. #6
    Nouveau Candidat au Club
    Homme Profil pro
    Inscrit en
    Septembre 2011
    Messages
    9
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Septembre 2011
    Messages : 9
    Points : 1
    Points
    1
    Par défaut
    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 !

  7. #7
    Membre habitué
    Homme Profil pro
    Développeur Web
    Inscrit en
    Septembre 2011
    Messages
    89
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : Philippines

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Septembre 2011
    Messages : 89
    Points : 142
    Points
    142
    Par défaut
    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".

  8. #8
    Nouveau Candidat au Club
    Homme Profil pro
    Inscrit en
    Septembre 2011
    Messages
    9
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Septembre 2011
    Messages : 9
    Points : 1
    Points
    1
    Par défaut
    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.

  9. #9
    Nouveau Candidat au Club
    Homme Profil pro
    Inscrit en
    Septembre 2011
    Messages
    9
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Septembre 2011
    Messages : 9
    Points : 1
    Points
    1
    Par défaut
    Ouais en fait je n'y comprends rien en JS :/

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

  10. #10
    Membre habitué
    Homme Profil pro
    Développeur Web
    Inscrit en
    Septembre 2011
    Messages
    89
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : Philippines

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Septembre 2011
    Messages : 89
    Points : 142
    Points
    142
    Par défaut
    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 ?

  11. #11
    Nouveau Candidat au Club
    Homme Profil pro
    Inscrit en
    Septembre 2011
    Messages
    9
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Septembre 2011
    Messages : 9
    Points : 1
    Points
    1
    Par défaut
    En théorie oui, mais en pratique je n'y arrive pas

  12. #12
    Membre habitué
    Homme Profil pro
    Développeur Web
    Inscrit en
    Septembre 2011
    Messages
    89
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : Philippines

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Septembre 2011
    Messages : 89
    Points : 142
    Points
    142
    Par défaut
    Sur quelle partie tu bloques ?
    Tu arrives à afficher une première fois une vidéo avec ce "système" ?

  13. #13
    Nouveau Candidat au Club
    Homme Profil pro
    Inscrit en
    Septembre 2011
    Messages
    9
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Septembre 2011
    Messages : 9
    Points : 1
    Points
    1
    Par défaut
    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

  14. #14
    Membre habitué
    Homme Profil pro
    Développeur Web
    Inscrit en
    Septembre 2011
    Messages
    89
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : Philippines

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Septembre 2011
    Messages : 89
    Points : 142
    Points
    142
    Par défaut
    Tu peux poster ton code actuel pour une vidéo crée avec l'API ? Le dernier code qui fonctionne en fait.

  15. #15
    Nouveau Candidat au Club
    Homme Profil pro
    Inscrit en
    Septembre 2011
    Messages
    9
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Septembre 2011
    Messages : 9
    Points : 1
    Points
    1
    Par défaut
    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 !!

Discussions similaires

  1. Stopper vidéo Youtube
    Par saluts92 dans le forum Général JavaScript
    Réponses: 0
    Dernier message: 23/07/2013, 10h19
  2. Google veut stopper la conversion des vidéos YouTube en MP3
    Par Hinault Romaric dans le forum Actualités
    Réponses: 38
    Dernier message: 14/07/2012, 08h33
  3. Stopper le son d'une vidéo youtube intégrée sous flash
    Par stef51 dans le forum ActionScript 1 & ActionScript 2
    Réponses: 2
    Dernier message: 10/05/2011, 17h42
  4. Réponses: 7
    Dernier message: 08/04/2010, 16h10
  5. [C#]rechargement page apres fermeture popup
    Par julio84 dans le forum ASP.NET
    Réponses: 5
    Dernier message: 04/05/2005, 09h50

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo