YouTubeの横幅をレスポンシブに対応する方法！コピペ可 CSS

Webサイトをスマートフォンやタブレットで観覧するユーザーが増加するようになり、モバイル端末に最適化するサイトが多くなりました。最適化は端末によって動的にページを切り替える方法や、画面サイズによって表示を変えるレスポンシブ・ウェブ・デザインなどがあります。

どの方法で最適化していても良いのですが、一つ困ったことがあります。PC用ページを基準にYouTube等の動画をサイトに埋め込む場合、スマートフォンやタブレットでページを見ると動画がはみ出してしまうということです。せっかくモバイル端末に最適化していても、動画を入れることでレイアウトが崩れてしまうのは問題です。

そこで今回はYouTube等の動画をサイトに埋め込んだ場合、その動画も画面の横幅に合わせて拡大縮小させる方法をご紹介します。

レスポンシブに対応させるコード

画面の横幅に合わせて拡大縮小させる方法はとても簡単で、下記のCSSのコードを追加して頂くだけでOKです！※CSSの内容は自分の好みに合わせて変更してください。

.youtube-re{
position: relative;
overflow: hidden;
margin: 15px 0 20px 0;
padding-bottom: 50%;
padding-top: 65px;
}
.youtube-re iframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}

動画を埋め込む際は下記のように［class=”youtube-re”］を入れた［div］で囲んであげてください。これだけで画面の横幅に合わせて動画のサイズも調整されます。

<div class="youtube-re">
<iframe width="610" height="343" src="//www.youtube.com/embed/6SIE3kWbslY?rel=0" frameborder="0" allowfullscreen></iframe>
</div>

このコードを利用した時の表示例が下のキャプチャです。動画を埋め込むことが多いサイトであれば、ぜひ活用してみてください！