J'essaie d'utiliser la fonctionnalité Modal de Bootstrap 3 pour montrer ma vidéo Youtube. Cela fonctionne, mais je ne peux cliquer sur aucun bouton de la vidéo Youtube.
Une aide à ce sujet?
Voici mon code:
<div id="link">My video</div>
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<iframe width="400" height="300" frameborder="0" allowfullscreen=""></iframe>
</div>
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.10.1.min.js"><\/script>')</script>
<script src="js/bootstrap.min.js"></script>
<script>
$('#link').click(function () {
var src = 'http://www.youtube.com/v/FSi2fJALDyQ&autoplay=1';
$('#myModal').modal('show');
$('#myModal iframe').attr('src', src);
});
$('#myModal button').click(function () {
$('#myModal iframe').removeAttr('src');
});
</script>
jquery
css
twitter-bootstrap
youtube
twitter-bootstrap-3
NitroMedia
la source
la source
J'ai assemblé ce script modal vidéo YouTube dynamique html / jQuery qui lit automatiquement la vidéo YouTube lorsque vous cliquez sur le déclencheur (lien), le déclencheur contient également le lien à lire. Le script trouvera l'appel modal d'amorçage natif et ouvrira le modèle modal partagé avec les données du déclencheur. Voir ci-dessous et laissez-moi savoir ce que vous pensez. J'aimerais entendre des pensées ...
DÉCLENCHEUR MODAL HTML:
MODÈLE VIDÉO MODAL HTML:
LA FONCTION JQUERY:
L'APPEL DE FONCTION:
Le FIDDLE: http://jsfiddle.net/jeremykenedy/h8daS/1/
la source
hidden.bs.modalévénement comme un moyen de désactiver la vidéo, car l'utilisateur peut faire d'autres choses pour fermer le modal (par exemple, cliquer à l'extérieur).J'ai un conseil pour vous!
J'utiliserais:
au lieu de:
Parce que vous pouvez également fermer le modal sans le bouton, donc là pour avec ce code, il supprimera la vidéo à chaque fois que le modal se cachera.
la source
'src'J'ai trouvé cela dans un autre thread, et cela fonctionne très bien sur les ordinateurs de bureau et les mobiles - ce qui ne semblait pas vrai avec certaines des autres solutions. Ajoutez ce script à la fin de votre page:
la source
Voici une autre solution: Forcer la vidéo YouTube HTML5
Ajoutez simplement? Html5 = 1 à l'attribut source sur l'iframe, comme ceci:
la source
Essayez ceci pour Bootstrap 4
visitez: https://parrot-tutorial.com/run_code.php?snippet=bs4_modal_youtube
la source
Si vous ne voulez pas modifier le CSS de bootstrap ou que tout ce qui précède ne vous aide pas du tout (comme dans mon cas), il existe une solution simple pour que la vidéo s'exécute dans un modal sur Firefox.
Il vous suffit de supprimer la classe "fade" du modal et lorsqu'elle ouvre la classe "in" aussi:
la source
Je l'ai résolu sur le modèle wordpress:
la source
Bootstrap fournit une fonctionnalité de pop-up modale prête à l'emploi.
la source
MMhh ... Pouvez-vous publier l'intégralité de votre document HTML et quel navigateur / quelle version vous utilisez?
J'ai recréé votre page et testé dans 3 navigateurs (Chrome, FF, IE8). J'ai pu arrêter et démarrer la superbe bande-annonce WDS4 sans aucun problème. Voici mon code:
Vous pourriez essayer d'amener le Z-Index de votre lecteur modal plus haut dans la pile?
$('#myModal iframe').css("z-index","999");la source
la source
en utilisant des
$('#introVideo').modal('show');conflits avec le déclenchement approprié du bootstrap Lorsque vous cliquez sur le lien qui ouvre le modal, il se ferme juste après avoir terminé l'animation de fondu. Supprimez simplement le$('#introVideo').modal('show');(en utilisant bootstrap v3.3.2)Voici mon code:
la source
La réponse de user3084135 a bien fonctionné comme base pour moi, mais j'avais également besoin d'incorporer:
Ma solution finie ressemble à ceci:
BOUTON DE DÉCLENCHEMENT MODAL
L'attribut de trame de données peut être "iframe" ou "video" pour refléter le type de balise approprié: iframe pour les vidéos externes, vidéo pour les vidéos hébergées localement.
CONTENEURS VIDÉO BOOTSTRAP RESPONSIFS
iFrame:
vidéo:
Ces deux éléments résident dans les divs modaux réactifs Bootstrap standard.
SCRIPT JQUERY
Étant donné que la lecture automatique fonctionne différemment avec les tags iframe et vidéo, un conditionnel est utilisé pour traiter chacun d'eux. Pour autoriser plusieurs modaux, un sélecteur générique est utilisé pour les identifier (portfolioModal1-6 dans mon cas).
la source
J'ai eu ce même problème - je venais juste d'ajouter les liens cdn font-awesome - commenter le bootstrap ci-dessous a résolu mon problème ... je ne l'ai pas vraiment résolu car la police awesome fonctionnait toujours -
la source
D'accord. J'ai trouvé une solution.
la source
Pour Bootstrap 4, qui gère les vidéos, images et pages ...
http://jsfiddle.net/c4j5pzua/
la source
la source