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動画をレスポンシブに埋め込む方法を紹介した。