YouTubeをホームページに埋め込む時に、埋め込みコードのサイズを指定すればサイズを変更することができます。

しかし、レスポンシブデザインの場合は、ユーチューブ動画をパソコン向けに最適なサイズに指定すると、
スマホで閲覧した時に動画が画面からはみ出してしまいます。

こんな感じです↓

 

逆に、スマートフォンの画面サイズに合わせた大きさにすると、パソコンで見たときに小さすぎます。

 

ですので、画面サイズに合わせてYouTube動画のサイズを最適に表示できる設定方法を説明します。

レスポンシブデザインでホームページを作っている人は参考にしてみてください。

 

まずは、CSSに下記のコードを追加します。

.video {
	position: relative;
	magin-bottom: 30px;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}
 
.video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

 

次に、YouTubeの埋め込みコードを、動画を表示したいページに貼り付けます。

 

貼り付けた後に、貼り付けたコードを下記のタグで囲みます。

<div class="video">

</div>

 

こんな感じに貼り付けます↓

 

これで完了です。

 

パソコンとスマホで表示を確認してみてください。

パソコンで閲覧した場合

 

スマホで閲覧した場合

 

これで、レスポンシブデザインに対応できました。