Youtube Video Autoplay in popup
Solution 1
I think you want something like that :
Basically i use the API Javascript to add actions play
and pause
to the video.
And i use default function of Foundation to add an event when to the player.
HTML
<a href="#" data-reveal-id="myModal">Click Me For A Modal</a>
<div id="myModal" class="reveal-modal" data-reveal>
<h2>Awesome</h2>
<div id="player"></div>
<a class="close-reveal-modal">×</a>
</div>
JS
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '315',
width: '560',
videoId: 'l-gQLqv9f4o',
events: {
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING) {
//player is playing
} else {
//player is paused
}
}
function stopVideo() {
player.stopVideo();
}
function playVideo() {
player.playVideo();
}
function pauseVideo() {
player.pauseVideo();
}
$(document).on('opened.fndtn.reveal', '[data-reveal]', function () {
playVideo();
});
$(document).on('closed.fndtn.reveal', '[data-reveal]', function () {
pauseVideo();
});
Solution 2
From the YouTube JavaScript Player API Reference:
The JavaScript API allows users to control the YouTube chromeless or embedded video players via JavaScript. Calls can be made to play, pause, seek to a certain time in a video, set the volume, mute the player, and other useful functions.
You can use the API's player.playVideo()
, player.pauseVideo()
and player.stopVideo()
method.
YOU
Updated on July 22, 2022Comments
-
YOU almost 2 years
I've made a popup and placed a youtube video in it. I set video to autoplay. But the problem is video plays when i open the page. It is auto play in global and i want it to autoplay when popup shows. I did not find any solution for it.
Currently, It playing like i have background ghost saying something. Can anyone help?
Video 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>
Calling popup
<a href="#" data-reveal-id="video_pop"><img src="kaow.png"/></a> </div>
Popup Content
<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); },
EDITED:
I am using Foundation 5 Reveal Model for popup: http://foundation.zurb.com/docs/components/reveal.html
-
YOU almost 10 yearsWell, its more confusing now. Can you specifically state any solution?