Bootstrapの動画埋め込みを完全解説！.ratioで比率を維持する方法
生徒
「動画をページに埋め込むと、画面サイズによって表示が崩れてしまいます。」
先生
「Bootstrapには動画やiframeのサイズを自動調整してくれる便利な機能があります。」
生徒
「どのようにして動画の縦横比を保つことができるのですか？」
先生
「.ratioクラスを使うことで、動画や外部コンテンツを綺麗に表示できます。詳しく確認していきましょう。」
1. Bootstrapの.ratioとは何か
Bootstrapの.ratioとは、動画や地図などの埋め込みコンテンツを画面サイズに合わせて調整するための仕組みです。ウェブページでは画面の大きさがスマートフォンやパソコンなどで大きく異なります。そのため、固定サイズの動画を表示すると、横幅がはみ出したり高さがつぶれたりする問題が起こります。
.ratioを使うと、動画やiframeの縦横比を保ったままサイズを自動調整できます。縦横比とは、横と縦の長さの割合のことで、動画では横長の形や正方形などがあります。これを維持することで、どの端末でも自然な表示になります。
初心者の人は、動画を入れる箱を用意して、その箱の形を固定するイメージで覚えると理解しやすくなります。動画そのもののサイズを調整するのではなく、動画を入れる容器を整えることで見た目を綺麗に保つことができます。
2. 基本的な16対9の動画を表示する方法
最も一般的な動画サイズは16対9です。動画配信サイトでも多く使用されている比率です。Bootstrapでは.ratioとratio-16x9を指定するだけで、この比率を簡単に設定できます。
<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/tgbNymZ7vqY" title="動画"></iframe>
</div>
ratio-16x9を指定すると、自動的に横幅と高さのバランスが調整されます。スマートフォンでは横幅が狭くなりますが、高さも比例して変わるため表示が崩れません。
3. 正方形の動画やコンテンツを表示する方法
動画だけでなく、商品紹介や画像コンテンツでは正方形の表示が必要になる場合があります。その場合はratio-1x1を使用します。正方形は縦と横が同じ長さの形です。
<div class="ratio ratio-1x1">
<iframe src="/img/sample120-120.jpg" title="画像"></iframe>
</div>
この方法を使うと、画像を均等なサイズで整列できます。商品一覧ページやプロフィール画像などで役立ちます。
4. 4対3の比率を使用する方法
教育動画や古い映像では4対3の比率が使われることがあります。Bootstrapではratio-4x3を指定することで対応できます。
<div class="ratio ratio-4x3">
<iframe src="https://www.youtube.com/embed/tgbNymZ7vqY" title="動画"></iframe>
</div>
4対3は横幅より高さがやや大きくなります。用途に応じて比率を使い分けることで見やすいページを作れます。
5. Googleマップなど外部サービスの埋め込み
動画だけでなく地図などの外部サービスもiframeで埋め込みできます。iframeとは、別のウェブページを現在のページの中に表示する技術です。Bootstrapの.ratioを使うことで地図も綺麗に表示できます。
<div class="ratio ratio-16x9">
<iframe src="https://maps.google.com/maps?q=tokyo&t=&z=13&ie=UTF8&iwloc=&output=embed"></iframe>
</div>
地図をレスポンシブ対応することで、スマートフォンでも見やすくなります。レスポンシブとは画面サイズに応じて表示が変化する仕組みを指します。
6. カードコンポーネントと組み合わせる方法
Bootstrapにはカードという便利なデザイン部品があります。カードは情報を箱のようにまとめて表示するための機能です。動画と組み合わせることで、記事紹介や商品紹介ページを簡単に作成できます。
<div class="card" style="width: 18rem;">
<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
<div class="card-body">
<h5 class="card-title">動画タイトル</h5>
<p class="card-text">動画説明文がここに入ります。</p>
</div>
</div>
カードを使うとデザインが整い、視覚的に分かりやすいページになります。
7. .ratioを使うメリットと注意点
.ratioを使う最大のメリットは、複雑な計算をしなくても動画の形を保てる点です。以前はCSSを使って高さを計算する必要がありましたが、Bootstrapではクラスを指定するだけで簡単に対応できます。
また、ページの読み込み速度にも影響します。動画サイズが安定するとレイアウトのずれが減り、ユーザーが見やすいページになります。検索エンジンはユーザー体験を重視するため、表示が安定しているページは評価されやすくなります。
注意点として、iframeの中身のサイズは外部サービスに依存します。そのため、必ずratioクラスを使用して外側のサイズを整えることが重要です。初心者の人は、iframeを直接配置するのではなく、必ずratioで囲む習慣をつけると安全です。
8. 初心者が理解しやすい覚え方
.ratioは動画を入れる額縁のような存在です。額縁のサイズが決まっていると、中に入れる絵の形が崩れません。同じように、ratioは動画の形を保ちながら画面に合わせて拡大縮小します。
ウェブ制作では画面サイズの違いを考慮することが重要です。スマートフォン利用者が増えている現在、動画が崩れて表示されると閲覧者が離れてしまいます。.ratioを活用することで、初心者でも簡単に高品質なページを作ることができます。
特に動画コンテンツを扱うブログや企業サイトでは必須の技術です。Bootstrapの中でも覚えておくと実務で役立つ機能の一つです。
まとめ
ぶうとすとらつぷのれしおくらすはどうがうめこみやがいぶこんてんつひようじをあんていさせるためにとてもたいせつなやくわりをもつきのうです。うえぶぺえじさくせいではぱそこんすまあとふおんたぶれつとなるききでがめんさいずがことなりどうがやがぞうがくずれてしまうもんだいがおこりやすくなります。そのもんだいをかいけつするためにれしおくらすをしようするとたてよこのひりつをたもちながらじどうでさいずをへんこうできます。これによりりすぽんしぶでざいんをじつげんできゆうざあがどのききからえつらんしてもみやすいひようじをつくることができます。
れしおじゆうろくたいきゆうはどうがはいしんさいとでよくつかわれているひようじひりつでありいちばんしようひんどがたかいせつていです。またれしおいちたいちはしようひんいちらんやぷろふいいるがぞうひようじにてきしておりきんとうなれいあうとをつくることができます。さらにれしおよんたいさんはきよういくようどうがやこてんえいぞうなどでしようされることがおおくようとにあわせてせつていをつかいわけることがじゆうようになります。このようにれしおくらすをしようすることでふくざつなすたいるせつていをおこなわなくてもたんじゆんなくらすしていだけでたかひんしつなうえぶぺえじをさくせいできます。
どうがうめこみではあいふれえむたいぐをつかつてがいぶさあびすをぺえじないにひようじしますがそのままはいちするとさいずがふあんていになりやすくれいあうとくずれやひようじおくれのげんいんになります。れしおくらすであいふれえむをかこむことでがぞうやどうがのがいそくさいずがこていされがめんはばにおうじてなめらかにへんかします。これによりぺえじのれいあうとがあんていしえつらんしゃにとつてかいてきなかんきようをていきようできます。うえぶせいさくではこうしたあんていしたひようじがたいへんじゆうようでありさがくひようかにもこうけんするとかんがえられています。
かあどこんぽおねんととくみあわせるとどうがとせつめいぶんをいちどにひようじできじしようかいやしようひんせつめいぺえじをこうりつてきにさくせいできます。れしおくらすとかあどをくみあわせることでみためがせいりされえつらんしゃがじようほうをりかいしやすくなります。またうえぶさくせいしよしんしやでもみやすくせいりされたぺえじをたんじかんでさくせいできるためじつむでもおおくりようされているほうほうです。
れしおくらすをおぼえるさいにはどうがをいれるわくをつくるいめえじでもつとりかいしやすくなります。わくのかたちをせつていしてからなかみにどうがやがぞうをはいちすることでひようじのばらつきをふせぐことができます。りすぽんしぶでざいんをがくしゆうするうえでもきほんとなるぎじゆつでありどうがこんてんつをあつかううえぶさいとやきぎようさいとぶろぐうんえいなどさまざまなばめんでやくだちます。
サンプルプログラム
<div class="card">
<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/tgbNymZ7vqY" title="どうが"></iframe>
</div>
<div class="card-body">
<h5 class="card-title">どうがしょうかい</h5>
<p class="card-text">れしおくらすをつかつたどうがひようじれいです。</p>
</div>
</div>
れしおくらすとがぞうひようじれい
<div class="ratio ratio-1x1">
<img src="/img/sample120-120.jpg" alt="さんぷるがぞう" style="width:100%;height:100%;">
</div>
生徒
れしおくらすをつかうとどうがやがぞうのひようじがあんていすることがわかりました。がめんさいずがかわつてもたてよこのひりつがくずれないのでみやすいぺえじをつくれるとかんじました。
先生
そのとおりです。れしおくらすはりすぽんしぶでざいんをささえるじゆうようなきのうです。どうがうめこみやがいぶこんてんつひようじではかならずつかうことをいしきしましよう。
生徒
じゆうろくたいきゆうやいちたいちよんたいさんなどひりつをかえることでさまざまなひようじにたいおうできることもりかいできました。かあどこんぽおねんととくみあわせるとさらにみやすくなるとおもいました。
先生
よくりかいできています。れしおくらすをつかうことでふくざつなすたいるせつていをおこなわなくてもたかひんしつなぺえじをさくせいできます。こんごのうえぶさくせいでもきほんぎじゆつとしてかつようしていきましよう。
【60分集中】CSSを1行も書かない！？Bootstrap 5ユーティリティクラス活用で開発工数を50%削減
「スピード」が武器になる。Bootstrap 5で商用クオリティのWebサイトを高速構築。
本講座では、世界シェアNo.1のフレームワークBootstrap 5を使いこなし、ゼロからレスポンシブサイトを組み上げる「現場最速のワークフロー」を学びます。単なる導入に留まらず、ユーティリティクラスを活用した効率化と、実務で必須となるカスタマイズ技法を60分で完全習得します。
具体的なワークショップ内容と環境
【つくるもの】
モダンなランディングページ（LP）やダッシュボードのプロトタイプを作成します。ナビゲーション、ヒーローセクション、カードレイアウト、フッターなど、Bootstrapのコンポーネントを組み合わせて「一瞬で形にする」感動を体験してください。
【開発環境】
VS CodeにBootstrap 5専用のSnippet（補完機能）を導入し、手入力を最小限にする環境を構築。最新のCDN利用法や、表示速度（Core Web Vitals）を意識した最適な読み込み設定など、プロの初期設定を伝授します。
この60分で得られる3つの革新スキル
スマホ・タブレット・PCでレイアウトを自由自在に切り替える「ブレイクポイント」の極意を学びます。
CSSを1行も書かずに、マージン・パディング・カラーを制御。開発工数を半分以下にする実戦術を習得します。
「Bootstrap感」を消し、独自のブランドイメージに合わせるための、上書きの作法とデザインの整え方を伝授します。
※本講座は、HTML/CSSの基本を理解した方向けの「実践加速講座」です。制作会社のコーダーや副業フリーランスとして「案件の回転率」を上げ、市場価値を最大化させたい方をモクモクがバックアップします。
Bootstrap 5を楽しみながら、一緒に学びましょう！
各回少人数・マンツーマン形式で徹底サポート
このセミナーの詳細・お申し込みはこちら
