Nexus 9
PS4
Intuos Pro
Core i7-4790K
ページの先頭へ
トップに戻る
2013年5月1日 Web制作

【Youtube】埋め込み動画のサイズをレスポンシブに変更する方法


umekomiレスポンシブレイアウトを使っているブログだと必須かも?
YouTubeの動画をそのままブログに埋め込むとサイズが固定されてしまうので、レスポンシブレイアウトだと動画がはみ出してしまいます。
最近はスマートフォンで動画を視聴する人が増えているので、しっかり画面幅に応じて縮小されるようにしましょう。

HTML

こんな感じで、埋め込み動画にCSSを適用させる下準備として「iframe」を「div」で囲みます。クラス名は「vWrap」にしました。 CSSはこんな感じ。そのままコピペしてもOKですが、marginは自分のサイトに合わせて変更しましょう。

適用前と適用後

上がCSS適用前で、下が適用後です。ブラウザの幅を変えてチェックしてみてください。

vWrapで囲んだほうの動画は画面幅に応じて変形していますね!これで完成です。
関連するかもしれない記事