Webページに サイズ可変の YouTube 動画を埋め込む

Webサイトやブログページで動画を埋め込むことは一般的になっていますが、スクリーンサイズに合わせて動画サイズが可変になる埋め込み方法を YouTube を例にとり解説します。

YouTube で動画の埋め込みコードを取得する際には動画のサイズを選択しますが、スクリーンサイズがさまざまなモバイルデバイスや、レスポンシブWebデザインに対応させるには動画サイズを可変にしたいときがあります。

そのようなときは、CSSを設定することでサイズが可変になる「エラスティックビデオ」にします。

スマートフォンなどモバイルデバイスでも閲覧できるデモページを用意しましたのでご覧ください。

>> サイズ可変の YouTube 動画 DEMO ページへ

【コンテンツ】

  1. YouTubeから埋め込みコードを取得する
  2. HTMLに埋め込みコードを貼り付ける
  3. CSSを設定する

YouTubeから埋め込みコードを取得する

まずは YouTube にアクセスして、動画の埋め込みコードを取得します。

埋め込みたい動画を検索したら、[共有]をクリックします。

YouTube画面での動画共有

次に[埋め込みコード]をクリックし、表示されたコードをコピーします。
[動画のサイズ]は "560 x 315" で構いません。

YouTube画面での埋め込みコード

HTMLに埋め込みコードを貼り付ける

取得したコードをHTMLに貼り付けます。
後で CSS設定をしますので、クラス名 "video" を付与した div要素で囲んでおきます。

この状態でWebページを表示すると、以下のように 560 x 315 のサイズで表示されます。

CSSを設定する

動画サイズを可変にするために、CSSに以下の設定を追加します。

埋め込みコードの親要素に付与したクラス "video" には、「position: relative」を指定します。
padding-bottomに指定した "56.25%" は、オリジナル動画サイズにおける縦横比(315:560)です。
iframeセレクタには、「position: relative」を指定し、幅と高さを "100%" にします。

これでサイズ可変の動画がページに表示され再生できるようになります。
デモページは以下です。

>> サイズ可変の YouTube 動画 DEMO ページへ

スポンサーリンク

ページの先頭へ