Youtube埋め込み動画をCSSでレスポンシブ化する方法

youtube動画をCSSでレスポンシブ化する

Youtube動画をブログ記事に貼り付けた時、パソコン画面ではいい感じに貼り付けられたように見えても、スマホやタブレット等の小さい画面で見るとはみ出してしまっていることがある。

こんな感じで↓

レスポンシブ対応前

これだとちょっと具合が悪い。

というわけで、Youtubeの埋め込み動画サイズが画面サイズに応じて変化するように、CSSを利用してレスポンシブ化する方法を紹介しようと思う。

まずはhtmlから。

①Youtubeの埋め込みコードの中のwidthとheightの指定を削除する。
iframeタグの外側をdivタグで囲み、適当なクラス名を付ける。

ソースコードの例

See the Pen jZexPY by yusuke (@yusuyusuke) on CodePen.

次にCSSを以下のように記述する。例示と異なるクラス名を付けた時はcss側のクラス名修正も忘れないように気をつけよう。

See the Pen oEaqbP by yusuke (@yusuyusuke) on CodePen.

これでスマホで見てもちゃんと画面サイズに収まって表示されるようになった。

レスポンシブ対応後

以上、Youtube動画をレスポンシブに埋め込む方法を紹介した。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする