2016-11-17 7 views
0

がここにサイトの閉鎖された後、再生を続けます。ホームページでhttp://neillieleadershipgroup.com/AvadaモーダルVimeoのビデオが

、あなたはビデオの再生ボタンが表示されます。それをクリックすると、ビデオを含むモーダルウィンドウが開きます。動画が自動再生に設定されていません。モーダルウィンドウを閉じると、ビデオのオーディオが再生され続けます。

私はこれを研究するのに何時間も費やしてきました。私は数多くの "ブートストラップ"モーダルビデオのJavaScriptコードをヘッダーとフッターに追加しようとしました。

私はjavascript/jqueryについてよく分かりませんが、HTMLとCSSについてかなりの量を知っています。私はサイトのソースを検索しましたが、このモーダルの背後にあるテクノロジー、つまりブートストラップなどを使用しているかどうかはわかりません。つまり、モーダルを制御するスクリプトを見つけることができません。
この1と同じ Play and stop Vimeo video placed in Bootstrap modal

これは、私はすでに読んで無駄にしようとした一品です
Audio from vimeo video continues after modal has closed
そして、私には何の助けなかっただけでなく、他の多くのがあります。私は、モーダルのためのJSを見つけることができれば、私もそれを提供するだろう再び

<div class="fusion-modal modal fade modal-1 homepage-video in" tabindex="-1" role="dialog" aria-labelledby="modal-heading-1" aria-hidden="false" id="homepage-video" style="display: block;"> 
<div class="modal-dialog modal-lg"> 
    <div class="modal-content fusion-modal-content" style="background-color:#f6f6f6"> 
    <div class="modal-header"> 
    <button class="close" type="button" data-dismiss="modal" aria-hidden="true">×</button> 
    <h3 class="modal-title" id="modal-heading-1" data-dismiss="modal" aria-hidden="true" data-fontsize="28" data-lineheight="36"></h3> 
    </div> 
    <div class="modal-body"> 
    <iframe src="https://player.vimeo.com/video/151703999?title=0&amp;byline=0&amp;portrait=0&amp;api=1&amp;player_id=player_1&amp;wmode=opaque" width="710" height="399" frameborder="0" allowfullscreen="allowfullscreen" id="player_1"></iframe> 
    </div> 
    </div> 
    </div> 
</div> 

:ここ

は、モーダルを作成するHTMLです。すべてのヘルプははるかに高く評価されて

videoSRC = $('iframe#player_1').attr('src'); 
    $('button.close').click(function() { 
    $(' iframe#player_1').attr('src', videoSRC); 
    }); 

    $('.homepage-video').on('hidden.bs.modal', function (e) { 
    $(' iframe#player_1').attr('src', videoSRC); 
    }); 


は、ここで私が試した最新のjQuery(モーダル近い時にビデオ再生を停止する)、動作しませんでした(ヘッダーとフッターの両方に追加)です。ありがとう!

答えて

1

これは、Vimeo JS APIを使用して簡単に行うことができます。ダウンロードおよびアップロードplayer.jsをこのリンクからあなたのワードプレスのテーマフォルダに:一度あなたがこの使用してjQueryのようにイベントを発生することができ、アップロードhttps://github.com/vimeo/player.js/blob/master/dist/player.min.js

: - 。それはあなたの問題を解決します

jQuery(document).ready(function($) { 

    var jqueryPlayer = new Vimeo.Player($('iframe#player_1')); 

    $('.homepage-video').on('hidden.bs.modal', function (e) { 
     jqueryPlayer.pause(); 
    }); 

}); 

(Y)

+0

私はこれを私のヘッダーファイルに追加しました: ...私のフッターにコードを追加しました。そしてそれは働いた!本当にありがとう! – chriscreation

関連する問題