Web制作

【Bootstrap 5.x】サイト開いた時にYoutubeをモーダルウィンドウ表示する方法

2023.10.04

Written by o-saka

サイトを開いた時にYoutubeをモーダルウィンドウ（ポップアップ）表示する方法をご紹介します。Bootstrap 5.x を使っていればコピぺでいけます。レスポンシブ対応です。

Youtubeをモーダル(ポップアップ)表示方法

HTML

ページの上の方に貼り付けます。

可能な限り、他の要素との干渉を避けるために、モーダルHTMLをトップレベルの位置に配置してください。別の固定要素の中に.modalを入れ子にすると、問題が発生する可能性があります。

モーダル · Bootstrap v5.3 より引用

html

<!--Youtube modal-->
<div
class="modal fade"
id="youtubeModal"
tabindex="-1"
aria-labelledby="youtubeModalLabel"
aria-hidden="true"
>
<divclass="modal-dialog modal-dialog-centered modal-xl">
<divclass="modal-content">
<divclass="modal-header">
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<divclass="ratio ratio-16x9 modal-body">
<iframe
style="max-width: 100%; height: 100%"
width="560"
height="315"
src="https://www.youtube.com/embed/【youtube id】?si=0T1HAcaqXkcUTlE4"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen
></iframe>
</div>
</div>
</div>
</div>
<!--//Youtube modal-->

javascript

<!--Youtube modal open-->
<scripttype="text/javascript">
$(window).on("load", function () {
$("#youtubeModal").modal("show");
});
</script>
<!--//Youtube modal open-->

以上で完了です。

モーダル · Bootstrap v5.3