web-dev-qa-db-ja.com

ポップアップでのYouTube動画の自動再生

ポップアップを作成し、その中にYouTubeビデオを配置しました。ビデオを自動再生に設定しました。しかし問題は、ページを開いたときにビデオが再生されることです。これはグローバルでの自動再生であり、ポップアップが表示されたときに自動再生する必要があります。それに対する解決策は見つかりませんでした。

現在、それは私が背景の幽霊が何かを言っているように遊んでいます。誰か助けてもらえますか？

ビデオ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>

ポップアップを呼び出しています

 <a href="#" data-reveal-id="video_pop"><img src="kaow.png"/></a>
    </div>

ポップアップコンテンツ

<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);
    },

編集済み：

私はポップアップにFoundation 5 Reveal Modelを使用しています： http://foundation.zurb.com/docs/components/reveal.html

javascriptjqueryhtmlcssyoutube
10
YOU

私はあなたがそのようなものを望んでいると思います：

ライブ例

基本的に、私はAPI Javascriptを使用して、アクションplayおよびpauseをビデオに追加します。

そして、私はFoundationのデフォルト機能を使用して、プレーヤーにイベントを追加します。

[〜＃〜] 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();
});
9
mpgn

YouTube JavaScript Player APIリファレンスから ：

JavaScript APIを使用すると、JavaScriptを介してYouTubeのクロムレスプレーヤーまたは埋め込み動画プレーヤーを制御できます。呼び出しは、ビデオの再生、一時停止、特定の時間のシーク、音量の設定、プレーヤーのミュートなどの便利な機能を実行するために行うことができます。

APIのplayer.playVideo()、player.pauseVideo()およびplayer.stopVideo()メソッドを使用できます。

4
Faiz Ahmed

@Jarod Meansスクリプトに感謝！ jQueryが必要なだけなので、動作し、私はそれを使用しています（単純なソリューション=優れたソリューション）。しかし、例として、または同じdom内の複数のクリップに対してこのソリューションが必要な場合はいつでも、スライドショーに最適な複数のビデオクリップ用に開発しました。私もそれを作ったので、それは完全にjQueryにあります。

投稿するだけで好きなように使えます。

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <meta charset="utf-8">
    <title>Youtube-player test</title> 
    <style>
        .youtube-player iframe {
            display: none;
        }

        .youtube-player.active iframe {
            display: block;
        }
    </style>
</head>
<body>
    <div class="youtube-player">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/XzXjuDM_Z54" frameborder="0" allowfullscreen></iframe>
        <a href="#" class="youtube-link-start">Open window</a>
        <a href="#" class="youtube-link-stop">Close window</a>
    </div>
    <div class="youtube-player">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/l2EYyzXJIdE" frameborder="0" allowfullscreen></iframe>
        <a href="#" class="youtube-link-start">Open window</a>
        <a href="#" class="youtube-link-stop">Close window</a>
    </div>

    <script>

        jQuery('.youtube-player').each(function(){
            jQuery(this).on('click', '.youtube-link-start', function(){
                jQuery(this).parent().addClass('active');

                var loc = $(this).siblings('iframe').attr('src');
                var startloc = loc + "?autoplay=1";
                $(this).siblings('iframe').attr('src', startloc);
            });

            jQuery(this).on('click', '.youtube-link-stop', function(){
                jQuery(this).parent().removeClass('active');

                var loc = $(this).siblings('iframe').attr('src');
                var stoploc = loc.replace("?autoplay=1", "");
                $(this).siblings('iframe').attr('src', stoploc);
            });
        });
    </script>
</body>
</html>

これをhtml、css、jQueryで必要に応じて変更/開発し続けることができると思います。 :)

0
JoakimB

したがって、私はこれについてさまざまなスレッドをたくさん読んだので、私が見たもののほとんどはかなり複雑です。私はもっ​​と簡単なルートを選びました。

    $('.reveal-overlay').click(function(e){
    var loc = document.getElementById('myFrame').src;
    var stoploc = loc.replace("?autoplay=1", "");
    document.getElementById('myFrame').setAttribute('src', stoploc);
    });

    $('.playVideo').click(function(e){
    var loc = document.getElementById('myFrame').src;
    var autoloc = loc + "?autoplay=1";
    document.getElementById('myFrame').setAttribute('src', autoloc);
    });

これは基本的に、モーダルが開かれると、？autoplay = 1をYouTubeビデオに追加するだけです。 .playVideoクラスは、モーダルウィンドウを開くために使用するボタンにあります。

クラス.reveal-overlayはFoundationによって作成されます。したがって、オーバーレイがクリックされると、動画のURLから？autoplay = 1が削除されます。

これがこの問題に遭遇している人を助けることを願っています。それはシンプルで、複数の異なるビデオで機能するはずです。さらに、誰かがjsをオフにしている場合、バックグラウンドで何も再生されません。

もう1つ、ロードするビデオは、通常の非自動再生ビデオでなければなりません。これにより、onyをクリックすると自動再生になり、閉じると非自動再生に戻ります。

0
Jarod Means