[解決済み] Bootstrap 3とYoutubeをモーダルで表示する
2022-04-21 14:14:22
質問
Bootstrap 3のモーダル機能を使って、Youtubeの動画を表示しようとしています。動作はするのですが、Youtubeの動画内のボタンをクリックすることができません。
何かいい方法はないでしょうか?
以下は私のコードです。
<div id="link">My video</div>
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<iframe width="400" height="300" frameborder="0" allowfullscreen=""></iframe>
</div>
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.10.1.min.js"><\/script>')</script>
<script src="js/bootstrap.min.js"></script>
<script>
$('#link').click(function () {
var src = 'http://www.youtube.com/v/FSi2fJALDyQ&autoplay=1';
$('#myModal').modal('show');
$('#myModal iframe').attr('src', src);
});
$('#myModal button').click(function () {
$('#myModal iframe').removeAttr('src');
});
</script>
解決方法は?
この問題(または、私が発見して説明した問題)を発見しました。
https://github.com/twbs/bootstrap/issues/10489
)でのCSS3変換(translation)に関するものです。
.modal.fade .modal-dialog
クラスがあります。
bootstrap.cssの中に、以下のような行があります。
.modal.fade .modal-dialog {
-webkit-transform: translate(0, -25%);
-ms-transform: translate(0, -25%);
transform: translate(0, -25%);
-webkit-transition: -webkit-transform 0.3s ease-out;
-moz-transition: -moz-transform 0.3s ease-out;
-o-transition: -o-transform 0.3s ease-out;
transition: transform 0.3s ease-out;
}
.modal.in .modal-dialog {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
}
これらの行を以下のように置き換えると、ムービーが正しく表示されます(私の場合)。
.modal.fade .modal-dialog {
-webkit-transition: -webkit-transform 0.3s ease-out;
-moz-transition: -moz-transform 0.3s ease-out;
-o-transition: -o-transform 0.3s ease-out;
transition: transform 0.3s ease-out;
}
.modal.in .modal-dialog {
}
関連
-
[解決済み] CSSでcellpaddingとcellspacingを設定する?
-
[解決済み] YouTube APIからYouTubeビデオのサムネイルを取得する方法を教えてください。
-
[解決済み] SCSSとSassの違いは何ですか?
-
[解決済み] Twitter Bootstrapのメニューをクリックではなく、ホバーでドロップダウンさせる方法
-
[解決済み] Twitter Bootstrap 3を使用して列を中央に配置する
-
[解決済み] Bootstrapの列をすべて同じ高さにするにはどうしたらいいですか?
-
[解決済み] Bootstrap3による垂直方向の整列
-
[解決済み] BootstrapのモーダルウィンドウをjQueryで開くには?
-
[解決済み] Bootstrap 3 の sr-only とは何ですか?
-
[解決済み] Bootstrapのモーダルが背景の下に表示される
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] JavaScript - 二重引用符のエスケープ
-
[解決済み] jQueryを使って「Please Wait, Loading...」というアニメーションを作成するにはどうすればよいですか?
-
[解決済み] Twitter Bootstrapのモーダルクローズに関数をバインドする
-
[解決済み] .on('click') と .click() の違いについて
-
[解決済み] jQueryは要素のレンダリングされた高さを取得しますか?
-
[解決済み] セレクトボックスの選択項目を設定する
-
[解決済み] jquery input select all on focus
-
[解決済み] Electron: jQueryが定義されていない
-
[解決済み] jQuery / JavaScriptでJSONデータをパースする方法は?
-
[解決済み】jQueryでRSSをパースする。