Bootstrap4を使えば、レスポンシブなYouTubeリンクを貼り付けることができます。
レスポンシブというのがミソです。
普通にYouTubeリンクを貼ると、固定サイズになってしまいますからね。
Bootstrap4を使えば、クラスを追加するだけでレスポンシブなYouTubeリンクの出来上がりです。
もちろんYouTubeだけでなく、普通の動画でもOKです。
Bootstrap4 YouTubeをレスポンシブで貼り付ける（HTML）
|
1 2 3 |
<div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/JYzTYXD6fGU" allowfullscreen></iframe> </div> |
「div」に「embed-responsive」と「embed-responsive-16by9」を追加します。
「16by9」は動画の比率を表しています。
表示させたい動画に合わせて変えてくださいね。
ちなみに以下のクラスが使えます。
- embed-responsive-21by9
- embed-responsive-16by9
- embed-responsive-4by3
- embed-responsive-1by1
動画を設定する「iframe」には「embed-responsive-item」を設定すれば完成です！
サンプルも作成しています。
良ければ見ていってくださいね。
See the Pen Bootstrap4 YouTubeをレスポンシブで貼り付ける（YouTube埋め込み） by clue-design (@clue-design) on CodePen.0
コード変更や、大きな画面でみたい場合はこちらから。
