jQuery Girl
  1. jQuery Girl
  3. Vidéo YouTube présentée en superposition, semble se fermer si je clique à l’intérieur de la division
Intereting Posts
Comment définir les dimensions DIV en fonction de la hauteur et de la largeur de background-image Ajouter dynamicment des scripts dans une div à l’aide de Jquery Déterminer à quoi jQuery .ajax () résout une chaîne de redirections En utilisant le guidon, j’obtiens cette erreur: Uncaught TypeError: $ (…) .geocomplete n’est pas une fonction Repeindre le CSS IE9 au moment du repository Supprimer les fichiers séquentiels de la division remplis par les utilisateurs du CMS via des éditeurs de texte enrichi Comment obtenir que la fonction expandeur fonctionne avec les données jQuery dynamics? Comment modifier l’atsortingbut ‘onchange’ dans une balise ‘select’? (en utilisant jquery) Exemple jQuery ajax simple ne trouvant pas les éléments dans le code HTML renvoyé JQuery, envoi d’un object JSON à l’aide de la méthode GET Animation jQuery backgroundColor Valeurs personnalisées en éléments de menu contextuel dans JQgrid Utilisation de jquery TokenInput sans ‘nom’ par défaut Le sélecteur de temps passe derrière le modal de bootstrap de twitter Comment retourner une valeur à partir d’un object littéral basé sur une clé?

Vidéo YouTube présentée en superposition, semble se fermer si je clique à l’intérieur de la division

L’idée est de lire une vidéo automatiquement dans une superposition, après un clic sur un bouton. Le code fonctionne et est actuellement lu, mais la vidéo ne peut pas être contrôlée à l’intérieur de la div et se ferme automatiquement si vous cliquez à l’intérieur de la div.

J’ai donc besoin d’aide pour rendre la vidéo à l’intérieur contrôlable, la fenêtre ne se ferme pas lorsque je clique dessus.

En guise de fonctionnalité supplémentaire, il serait bon que la fenêtre de superposition réagisse en fonction de la taille de l’écran.

Merci

JS 

$("#play1,#play2,#play3,#play4,#play5").click(function() { var value = $( this ).attr( 'track' ); player.loadVideoById(value,0); // put in overlay window openOverlay('#overlay-inAbox'); e.preventDefault(); var tag = document.createElement('script'); tag.src = "https://www.youtube.com/player_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); var player; function onYouTubePlayerAPIReady() { player = new YT.Player('overlay-inAbox', { height: '275', width: '375', events: { 'onReady': onPlayerReady } }); } });

CSS 

  function openOverlay(olEl) { $oLay = $(olEl); if ($('#overlay-shade').length == 0) $('body').prepend('
'); $('#overlay-shade').fadeTo(300, 0.6, function() { var props = { oLayWidth : $oLay.width(), scrTop : $(window).scrollTop(), viewPortWidth : $(window).width() }; var leftPos = (props.viewPortWidth - props.oLayWidth) / 2; $oLay .css({ display : 'block', top : '-50%', opacity : 0 }) .animate({ opacity : 1, top: '50%' }, 600); }); } function closeOverlay() { $('.overlay').animate({ top: '-50%', opacity : 0 }, 400, function() { $('#overlay-shade').fadeOut(300); $(this).css('display','none'); }); } $('#overlay-shade, .overlay a').live('click', function(e) { closeOverlay(); if ($(this).attr('href') == '#') e.preventDefault(); }); // Usage $('#overlaylaunch-inAbox').click(function(e) { openOverlay('#overlay-inAbox'); e.preventDefault(); });