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 ページへ

スポンサーリンク

特集記事

  • jQuery Mobile Image

    jQuery Mobile を基本から覚える
    スマホサイト制作に最適なフレームワークの利用方法を解説。DEMOページ・サンプルコードで動作を確認できます。

オンライン講座

Webの基礎マスター講座ページへのリンク


連載講座:WordPressで作る簡単Webサイトページへのリンク

提供しているサービス

WordPressサイト制作出張講座ページへのリンク

WordPress を利用した Webサイト制作の方法を、
あなたのオフィスにうかがいご説明いたします。
料金:¥28,000

サービス詳細ページ >>

申し込みフォーム >>


Webサイト1日公開サービスページへのリンク

一刻も早く Webサイトが必要な方のために、
一緒に作業し1日で公開までもっていきます。
料金:¥28,000

サービス詳細ページ >>

申し込みフォーム >>

スポンサーリンク

ページの先頭へ