web-dev-qa-db-ja.com

Lightbox Plus ColorBoxプラグインとYouTubeの自動再生ビデオ

私はWP v3.6とv2.6のプラグインを使っていて、インラインライトボックスを使って、iframeが埋め込まれたYouTubeビデオを開いています。私の上司は、ライトボックスが開いたときにビデオを再生したいと考えています。だから、もともと私が試した：

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player1;

function onYouTubeIframeAPIReady() {
    console.log('api ready');
    player1 = new YT.Player('player1', {});
}
jQuery(function()){
    jQuery('.lbp-inline-link-1').click(function(){
        player1.playVideo(); }
    });
});

しかし、それはうまくいきませんでした。ライトボックスの開閉時にプラグインが再生中のビデオを停止しているため、クリックイベントの再生が早すぎたのです。私はそれから私の呼び出しを修正しました：

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player1;

function onYouTubeIframeAPIReady() {
    console.log('api ready');
    player1 = new YT.Player('player1', {
        events: {
            'onReady': onPlayerReady
        }
    });
}
function onPlayerReady(event){
    console.log('player ready');
    jQuery('.lbp-inline-link-1').click(function(){
        console.log('click ready');
        var fn = function(){ event.target.playVideo(); }
        setTimeout(fn, 2500);
    });
}

現在のサンプルページ https://test-cms.salesgenie.com/salesgenie-data-quality/

これはChromeでは機能しましたが、他のすべてのブラウザでは、ライトボックスで2回目に開いたときに自動再生されるだけです。 YouTubeビデオを自動再生するためのより簡単で直接的な方法についての提案はありますか。

pluginsvideosyoutubemedia-modal
1
Robert

マークアップにYouTubeビデオをハードコードした場合、1つの解決策は?autoplay=1をsrcのURLに追加することです。

例えば、src="//www.youtube.com/embed/i8GZwagNZss?autoplay=1"です。

さらに支援が必要な場合はお知らせください。

1
Laniakea

私はユーザーのユーチューブビデオを表示するワードプレスプラグインを開発しました。プレビューボタンをクリックすると、太いボックスが表示され、YouTubeのビデオが自動再生されます。ユーザーが厚いボックスのモーダルを閉じると、ビデオは再生し続けましたが、これは非常にイライラするものでした。

私の解決策はdivが隠されているかどうかを半秒ごとにチェックするJavaScriptタイマーを書くことでした。それがモーダルに含まれている内容を削除した場合。

// hack to prevent iframe from playing when thicbox closes
window.setInterval(function(){
  if (jQuery('#TB_ajaxContent').is(":visible")){
      return;
  } else {
      jQuery('#wp2yt-uploader-preview-video').html('');
  }
}, 500);

たぶんあなたは以下のようなことをすることができます：

// hack to prevent iframe from playing when thicbox closes
window.setInterval(function(){
  if (jQuery('#fancybox-overlay').is(":visible")){
      return;
  } else {
      jQuery('#fancybox-content').html('');
  }
}, 500);

しかし、あなたは今それがうまくいっているように思えます。

1
EHerman