YouTube

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

投稿日:2015年4月10日 更新日:

どうも。ロイです。

今回は「YouTube動画をレスポンシブサイズに対応する方法」についてご紹介しましょう。

ブログやホームページに動画を埋め込みたいんだけど、スマホから見ると動画だけはみ出てしまう。

その場合は動画だけレスポンシブ対応されていないので、YouTube埋め込み動画をレスポンシブ対応に設定する方法をご紹介しよう。

スポンサードリンク
スポンサードリンク

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%」とすることで、横幅は画面に最適なサイズで表示するように指定できます。

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

 

スポンサードリンク




スマホ買い替える前に絶対読んで!
⇒【完全版】2017年絶対に失敗しないおすすめAndroidスマホランキング

スマホケースはやっぱり手帳型が一番?
⇒手帳型スマホケース使いにくい?メリットデメリットの調査結果まとめ

スマホケースはやっぱり手帳型が一番?
⇒有線セルカ棒とBluetoothセルカ棒どっちがいい?比較した結果
スポンサードリンク

-YouTube