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

YouTubeの横幅をレスポンシブに対応する方法!コピペ可 CSS
(YouTube, AdSense, Play 公認エキスパート)
2020年12月16日 in Web・IT, YouTube
記事内にPR・広告が含まれる場合があります

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>

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

執筆者情報
2004年から当サイト「iscle」を始めた管理者。Google 公認のプロダクトエキスパートとして、YouTube、Google AdSense、Play の公式コミュニティで活動中。スマホアプリ、Web ツールの使い方や最新情報を中心に発信しています。