たった1行追加するだけでYouTubeの埋め込み動画をレスポンシブに対応させる方法

たった1行追加するだけでYouTubeの埋め込み動画をレスポンシブに対応させる方法

たった1行追加するだけでYouTubeの埋め込み動画をレスポンシブに対応させる方法

ブログに YouTube の動画を埋め込んでいる人は多いと思います。また、最近ではサイトにレスポンシブデザインを採用している人も多いと思います。WordPress でもレスポンシブに対応したテーマが多くリリースされていますね。

レスポンシブデザインのブログに YouTube 動画を埋め込むと、スマートフォンでサイトを見た時に動画が画面からはみ出てしまうことがあります。

埋め込みコードを使って YouTube の動画を埋め込んだ場合、iframe を使って動画を表示します。この iframe の幅が 560px などに指定されているためスマートフォンで表示した時に画面からはみ出してしまうのです。

そんな YouTube 動画をレスポンシブに対応させる方法として、div などで動画のコードを囲って CSS クラスを付与して調整する方法がよく紹介されていますが、毎回 HTML ソースを書き換えるのは面倒ですよね。

ということで、この記事では CSS にたった1行追加するだけでレスポンシブに対応させちゃう方法を紹介したいと思います。

スポンサードリンク

YouTube動画の埋め込み

YouTube の動画をブログなどに埋め込む方法は、ブログにYouTubeの動画を埋め込む方法をご参照ください。

このときコードを変更する必要はありません。発行されたコードをそのまま貼り付けてください。

CSSへの追記

CSS に以下を追記します。WordPress ならテーマフォルダの style.css などに追記します。

iframe{ width:100%; }

これだけで完了です。簡単でしょ^^

あとがき

埋め込み動画がはみ出ちゃって気になるなーという方はぜひお試しください。

ちなみにやってることはほぼ同じですが、以下の方法でもレスポンシブに対応できます。


.content iframe{ width:100%; }
iframe{ max-width:100%; }

.content の部分はメインコンテンツの CSS クラスを指定しますので、環境に合わせて変更してください。こちらの記述だと幅の最大値を指定して調整できます。

お好みで使い分けてください。

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

5 thoughts on “たった1行追加するだけでYouTubeの埋め込み動画をレスポンシブに対応させる方法

    1. himecas Post author

      marosikiさん、コメントありがとうございます。

      xvideosの埋め込み動画もiframeを使用しているので、同じ方法でいけますよ。

  1. takahiro

    xvideosだと横幅はぴったりするのですが、高さが長くなってしまいます。何故なのでしょうか?

    ちなみにyoutubeは高さもちょうどいい感じになりました。

    1. himecas Post author

      takahiroさん、コメントありがとうございます。

      この方法だと縦横比の維持は考慮されていません。縦横比をちゃんと維持する方法を記事にしましたので、ご参照いただければと思います。

  2. Pingback: YouTubeの埋め込み動画をレスポンシブする方法! | 発信こそが成長と貢献

himecas へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。 が付いている欄は必須項目です