3

lightboxユーザーがビデオのサムネイル画像をクリックすると、Twitter Bootstrap のモーダル ボックスを使用してビデオをポップアップ表示します (例: http://seniorshomecare.harmonyapp.com/how-we-can-help、パスワード: shc を使用)。可能であれば、lightboxポップアップ時にビデオを自動再生し、ユーザーが閉じたときに自動停止したいと考えていますlightbox。これに似た質問がいくつかありますが、どれもあまり役に立ちませんでした。

どんな助けでも大歓迎です。ありがとう！

4

3 に答える 3

5

&autoplay=1YouTube 動画の URL に追加します。

http://support.google.com/youtube/bin/answer.py?hl=ja&answer=1181821

編集：

イベントショーを使用して、コードをモーダルに追加する関数をトリガーできます

$('#myModal').on('show', function () {
  $('div.modal-body').html('<iframe src="http://www.youtube.com/v/itTskyFLSS8&amp;rel=0&amp;autohide=1&amp;showinfo=0&amp;autoplay=1" width="500" height="281" frameborder="0" allowfullscreen=""></iframe>'); 
});

デモ: http://jsfiddle.net/baptme/WrrM3/

解決策は完全ではありません。モーダルを閉じるときに iframe を削除する必要があります。

于 2012-07-25T15:31:44.467 に答える
4

これにより、モーダルが閉じられたときに iFrame が削除されます。

$('#myModal').on('hide', function () {
$('div.modal-body').html('&nbsp;');  
});

http://jsfiddle.net/WrrM3/82/

于 2013-01-24T00:54:06.720 に答える
2

上記の回答は、ページにモーダルが 1 つしかない場合にうまく機能します。複数ある場合、ビデオは他のすべてのモーダルにロードされ、一部のブラウザーで同時に再生が開始されます。

#myModalこの問題を解決するには、次のように beforeを追加して、ビデオを挿入および削除する JavaScript をより具体的にdiv.modal-bodyします。

$('#myModal').on('show', function () {
  $('#myModal div.modal-body').html('<iframe src="http://www.youtube.com/v/itTskyFLSS8&amp;rel=0&amp;autohide=1&amp;showinfo=0&amp;autoplay=1" width="500" height="281" frameborder="0" allowfullscreen=""></iframe>'); 
});

$('#myModal').on('hide', function () {
  $('#myModal div.modal-body').html('&nbsp;');  
});
于 2013-04-29T22:14:19.630 に答える