Saturday, July 2, 2016

TAGGED UNDER: , ,

Youtube Video Autoplay in popup Blogger / WordPress



LIKE ON FACEBOOK


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&amp;autoplay=1&amp;rel=0&amp;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&amp;autoplay=1&amp;rel=0&amp;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
shareimprove this question

2 Answers

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">&#215;</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();
});









WARNING !

This site does not host any media file or any other file which might be under the influence of copyright. The links on this site lead to other sites! Not responsible for accessing and downloading files from links that lead them! Accessing links on this site, and downloading files from these leading assume your responsibility !!!



ASK.FM

About the Author

Have a good day/night!

0 comments:

Please no spam! Remove comment!

WARNING !

This site does not host any media file or any other file which might be under the influence of copyright. The links on this site lead to other sites! Not responsible for accessing and downloading files from links that lead them! Accessing links on this site, and downloading files from these leading assume your responsibility !!!

Labels

Info Download Video Oameni Jocuri Amuzament Romania Muzica Torrent FileList.ro Hip-Hop Stiri LG YouTube Bani Imagini Hack 2014 Bacau Software Auto PC Fotbal 2012 AI DE PLM Rapperi Filme Made in Romania FOR LIFE Arta Internet Cocalari Telefoane Muzica Adevarata Trailer Windows Blogger Tehnologie Artisti Copiii Online Servicii Online Fashion Facebook NU in Romania America Muzica de kkT 2013 TV Vedete Culinar Picture of the Day Animale Poza Zilei RObotzi Pitzipoance Sport Bani Pe Net Loto 6/49 Monden Slots Games Pack Sezonul 4 Sezonul 1 Sezonul 2 2015 Filme XXX JapKa Politia Seriale Online Stiinta Tutorial Underground HH Evenimente EA Sports Europa Evenimente Bacău Negative Gangsta-Rap Religia Album Android Bancuri Civilizatii Istoria Planete Subtitrari Counter-Strike 1.6 Droguri Naturist Promovare HH Concert Google Masoneria Natura Scoala Sezonul 3 Apple Microsoft Politica Samsung Adolescenta Fructe Pronosticuri Romani au Talent Sex Sexy Toshiba Pariu cu Viata Tatuaje Templates China Update Anglia Manele Subway Pub Cultura FIFA 07 Online Inventie Made in China Realitatea Rock Serials Elevi Poker Rusia Satana Simulator System Requirements Warcraft III: The Frozen Throne 2017 3D Audio Club Zebra Documentar DozaDeHas Franta Gadget HTML Italia Medicamente Mobile Racing Rapper Cocalar Reclama Afaceri EA Mobile Interviu Motociclete SKIDROW Sistem de operare Tigari WWE .dll 2016 Alcool Asus BeatBox Bulgaria Cartea Recordurilor Cool Driver England Las Fierbinti Mac OS Maps Warcraft Mircea Badea The Stage Valentine’s Day AdSense Antarctica Avioane Balul Bobocilor Box Casa de Cultură Bacău Crack FIFA Farse FreeStyle Gameloft Gepex Park Germania PSP Rasta Razboi Statusuri Terorism Trafic de Acte Twerk Team Twitter Versuri Videochat WebDesign Zodii eMachines 2018 ACTA Anonymous Basket Bauturi Bere Biletul Zilei Camera ascunsa Club Kremlin Crestin-Ortodox Dancing Fonturi Glu Google+ Handbal Linux MPC Micron Rezumat Setari
Subscribe on : YouTube

Statistics

Blog Archives

Copyright ©

Copyright ©
Proudly Powered by JK07.