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

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

HTML

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

適用前と適用後

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

vWrapで囲んだほうの動画は画面幅に応じて変形していますね！これで完成です。