最終更新日: 2021年2月15日

    BootstrapでYoutubeの動画をレスポンシブで埋め込む方法！

    BootstrapでYoutubeの動画をレスポンシブ対応で埋め込む方法を解説します。iframeタグを用いてYoutubeの埋め込みを行っていると思いますが、Bootstrapではその動画を簡単にレスポンシブ対応にできます。

    コンテンツ [表示]

    1. 1BootstrapでYoutubeの動画をレスポンシブで埋め込む方法

    BootstrapでYoutubeの動画をレスポンシブで埋め込む方法

    BootstrapでYoutubeの動画をレスポンシブ対応で埋め込む方法を解説します。Bootstrapを用いるとYoutubeの動画を簡単にレスポンシブ対応にできます。

    まずはYoutubeから目当てとなる動画のiframeタグを取得してきます。

    その後以下のサンプルコードのように記述することでレスポンシブ対応にすることができます。

    Youtubeの埋め込み

    <!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

    divタグのクラスで16:9か4:3のアスペクト比を選択することができます。

    .embed-responsiiveや.embed-responsive-4by3はBootstrap側で用意しているクラスで、埋め込み要素に対してレスポンシブ対応などアスペクト比の調整が可能なスタイルを適用するクラスです。

    GeekHive採用サイト

    関連記事