Youtube Vidéo en lecture automatique dans une fenêtre contextuelle
J'ai fait une popup et mis une vidéo sur youtube. J'ai mis la vidéo pour la lecture automatique. Mais le problème est que la vidéo joue quand j'ai ouvert la page. Il est auto play mondiale et je veux que ce jeu automatique lorsque le popup montre. Je n'ai pas trouvé de solution pour elle.
Actuellement, Il jouer comme j'ai une formation fantôme de dire quelque chose.
Quelqu'un peut-il aider?
Vidéo Html
<iframe width="800" height="315" src="http://www.youtube.com/embed/?wmode=opaque&autoplay=1&rel=0&color=white" frameborder="0"></iframe><a href="http://www.youtube.com" target="_blank"><img alt="" class="watermark" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQHcbyVSjHQlwCy3tYqOyLwSWDO4tblhxTVVjKV5R0PtFsPy9TwfA" /></a></div>
</div>
Appel popup
<a href="#" data-reveal-id="video_pop"><img src="kaow.png"/></a>
</div>
Popup Contenu
<div id="video_pop" class="reveal-modal medium">
<a class="close-reveal-modal"></a>
<div>
<iframe width="800" height="315" src="http://www.youtube.com/embed/?wmode=opaque&autoplay=1&rel=0&color=white" frameborder="0"></iframe><a href="http://www.youtube.com" target="_blank"><img alt="" class="watermark" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQHcbyVSjHQlwCy3tYqOyLwSWDO4tblhxTVVjKV5R0PtFsPy9TwfA" /></a></div>
</div>
JS
Foundation.libs.reveal = {
name: "reveal",
version: "4.2.2",
locked: !1,
settings: {
animation: "fadeAndPop",
animationSpeed: 250,
closeOnBackgroundClick: !0,
closeOnEsc: !0,
dismissModalClass: "close-reveal-modal",
bgClass: "reveal-modal-bg",
open: function() {},
opened: function() {},
close: function() {},
closed: function() {},
bg: a(".reveal-modal-bg"),
css: {
open: {
opacity: 0,
visibility: "visible",
display: "block"
},
close: {
opacity: 1,
visibility: "hidden",
display: "none"
}
}
},
init: function(b, c, d) {
return Foundation.inherit(this, "data_options delay"), "object" == typeof c ? a.extend(!0, this.settings, c) : "undefined" != typeof d && a.extend(!0, this.settings, d),
"string" != typeof c ? (this.events(), this.settings.init) : this[c].call(this, d);
},
events: function() {
var b = this;
return a(this.scope).off(".fndtn.reveal").on("click.fndtn.reveal", "[data-reveal-id]", function(c) {
c.preventDefault();
if (!b.locked) {
var d = a(this), e = d.data("reveal-ajax");
b.locked = !0;
if ("undefined" == typeof e) b.open.call(b, d); else {
var f = e === !0 ? d.attr("href") : e;
b.open.call(b, d, {
url: f
});
}
}
}).on("click.fndtn.reveal", this.close_targets(), function(c) {
c.preventDefault();
if (!b.locked) {
var d = a.extend({}, b.settings, b.data_options(a(".reveal-modal.open")));
if (a(c.target)[0] === a("." + d.bgClass)[0] && !d.closeOnBackgroundClick) return;
b.locked = !0, b.close.call(b, a(this).closest(".reveal-modal"));
}
}).on("open.fndtn.reveal", ".reveal-modal", this.settings.open).on("opened.fndtn.reveal", ".reveal-modal", this.settings.opened).on("opened.fndtn.reveal", ".reveal-modal", this.open_video).on("close.fndtn.reveal", ".reveal-modal", this.settings.close).on("closed.fndtn.reveal", ".reveal-modal", this.settings.closed).on("closed.fndtn.reveal", ".reveal-modal", this.close_video),
a("body").bind("keyup.reveal", function(c) {
var d = a(".reveal-modal.open"), e = a.extend({}, b.settings, b.data_options(d));
27 === c.which && e.closeOnEsc && d.foundation("reveal", "close");
}), !0;
},
open: function(b, c) {
if (b) if ("undefined" != typeof b.selector) var d = a("#" + b.data("reveal-id")); else {
var d = a(this.scope);
c = b;
} else var d = a(this.scope);
if (!d.hasClass("open")) {
var e = a(".reveal-modal.open");
"undefined" == typeof d.data("css-top") && d.data("css-top", parseInt(d.css("top"), 10)).data("offset", this.cache_offset(d)),
d.trigger("open"), e.length < 1 && this.toggle_bg(d);
if ("undefined" == typeof c || !c.url) this.hide(e, this.settings.css.close), this.show(d, this.settings.css.open); else {
var f = this, g = "undefined" != typeof c.success ? c.success : null;
a.extend(c, {
success: function(b, c, h) {
a.isFunction(g) && g(b, c, h), d.html(b), a(d).foundation("section", "reflow"),
f.hide(e, f.settings.css.close), f.show(d, f.settings.css.open);
}
}), a.ajax(c);
}
}
},
close: function(b) {
var b = b && b.length ? b : a(this.scope), c = a(".reveal-modal.open");
c.length > 0 && (this.locked = !0, b.trigger("close"), this.toggle_bg(b), this.hide(c, this.settings.css.close));
},
close_targets: function() {
var a = "." + this.settings.dismissModalClass;
return this.settings.closeOnBackgroundClick ? a + ", ." + this.settings.bgClass : a;
},
toggle_bg: function(b) {
0 === a(".reveal-modal-bg").length && (this.settings.bg = a("<div />", {
"class": this.settings.bgClass
}).appendTo("body")), this.settings.bg.filter(":visible").length > 0 ? this.hide(this.settings.bg) : this.show(this.settings.bg);
},
ÉDITÉ:
Je suis en utilisant Fondation 5 Révéler Modèle popup: http://foundation.zurb.com/docs/components/reveal.html
OriginalL'auteur YOU | 2014-08-07
Vous devez vous connecter pour publier un commentaire.
Je pense que vous voulez quelque chose comme ça :
LIVE
Fondamentalement, je suis d'utilisation de l'API Javascript pour ajouter des actions
play
etpause
à la vidéo.Et j'ai utiliser la fonction par défaut de la Fondation pour ajouter un événement quand le joueur.
HTML
JS
OriginalL'auteur mpgn
Vous pouvez utiliser l'API de
player.playVideo()
,player.pauseVideo()
etplayer.stopVideo()
méthode.OriginalL'auteur Faiz Ahmed
Donc, j'ai lu un tas de différentes discussions à ce sujet et la plupart de ce que j'ai vu, c'est assez compliqué. Je suis allé beaucoup plus simple route.
Ce sera tout simplement de l'ajouter ?autoplay=1 pour une vidéo de YouTube, une fois que le modal est ouvert. La classe .playVideo est sur tout autre bouton que vous utilisez pour ouvrir votre fenêtre modale.
La classe .révèlent-superposition est créé par la Fondation. Ainsi, lorsque le recouvrement est cliqué, il supprime tout ?autoplay=1 dans l'url de la vidéo.
Espère que cela aide quelqu'un courir dans ce problème. C'est simple et devrait fonctionner pour plusieurs types de vidéos, de plus, si quelqu'un a js désactivé, il ne va pas jouer rien dans le fond.
Encore une chose, la vidéo que vous charge doit être un habitué de la non-lecture automatique de la vidéo. Cela permettra d'en faire une lecture automatique après avoir cliqué ony et de le retourner à la non-exécution automatique lors de la fermeture.
OriginalL'auteur Jarod Means
Grâce à @Jarod Moyens de script! Ça fonctionne et je l'utilise car il ne nécessite jQuery (Simple solution = solution). Mais je l'ai développé pour plusieurs clips vidéo, ce qui est excellent dans les diaporamas, comme un exemple ou lorsque vous avez besoin de cette solution, pour plus d'un élément dans le même dom. J'ai aussi fait en sorte qu'il est complètement en jQuery.
Seulement l'affichage de sorte que vous pouvez l'utiliser comme vous le souhaitez.
Je suppose que vous pouvez garder sur le changement/le développement de ce avec html, css et jQuery à quoi correspondent à vos besoins. 🙂
OriginalL'auteur JoakimB