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

これはCSSとHTMLタグの2種類を設定しなくてはいけません。

まずはCSSコードです。スタイルシートにこちらのコードをそのまま張り付けましょう。

 

.video {
position: relative;
height: 0;
padding: 30px 0 56.25%;
overflow: hidden;
}

.video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

 

このままコードを張り付けたら、次はHTMLタグの設定です。

埋め込み動画のタグはこんな感じですよね。

 

<iframe width=”420″ height=”315″ src=”https://www.youtube.com/embed/vihzF0EMR9A?showinfo=0″ frameborder=”0″ allowfullscreen></iframe>

 

このままだと、横幅が420pxそのままの大きさの表示となってしまいます。これをレスポンシブ対応するには、このように表記します。

 

<div class=”video”>

<iframe width=”420″ height=”315″ src=”https://www.youtube.com/embed/vihzF0EMR9A?showinfo=0″ frameborder=”0″ allowfullscreen></iframe>

</div>

 

こうすることで埋め込み動画がレスポンシブ対応になるのでご確認ください。

　

もっと簡単に埋め込み動画をレスポンシブ対応にする方法

先ほどの埋め込み動画のタグを少し編集します。

 

編集前はこちら

 

<iframe width=”420″ height=”315″ src=”https://www.youtube.com/embed/vihzF0EMR9A?showinfo=0″ frameborder=”0″ allowfullscreen></iframe>

 

そして、編集後がこちらです。

 

<iframe width=“100%” height=”315″ src=”https://www.youtube.com/embed/vihzF0EMR9A?showinfo=0″ frameborder=”0″ allowfullscreen></iframe>

 

横幅のサイズを指定する数値を「100%」とすることで、横幅は画面に最適なサイズで表示するように指定できます。

高さはそのままにしておくと良いでしょう。お好みの数値に変更してももちろん良いと思いますよ。

 

ページ: