YouTube埋め込み動画をスマホサイズに最適なレスポンシブにする方法

今回は「YouTube埋め込み動画をスマホサイズに最適なレスポンシブにする方法」についてご紹介をします。

WordPressで運営しているサイトや無料ブログでブログを運営してたらページに動画を埋めたくなるときってありませんか？

色んな人に動画を見てほしいからおすすめの動画を張り付けますよね。

でも、張り付けた動画がスマホで見るとはみ出てる・・・なんだかダサいし動画も見切れて見れない・・・

こういう時はどうすればいいのか？

中級者以上の人は
この方法をぜひ試してみてください。

YouTube動画のレスポンシブを
上手く設定することができます。

方法は簡単です。

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

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

CSSスタイルシートに
こちらのコードをそのまま
コピペで張り付けます。

CSSスタイルシートに
貼り付けたら、

この動画の埋め込みコードに

<div class=”video”>

</div>

このように設定をします。
これで動画のレスポンシブは完成です。

これは初心者でも
超簡単にできる方法です。

CSSやHTMLとか
よくわからない人は
ぜひこの方法を真似してください。

これは埋め込みコードを
そのままコピペしたものです。

これを修正します。

どこをいじったかわかりますか？
赤文字のように修正をし
heigthの部分を削除しました。

これで動画がスマホのサイズに
ぴったりとあてはまります。

埋め込みコードをいじったYouTube動画を埋め込んでみた

実際に簡単な方法で
YouTube動画を埋め込んでみました。

どうでしょうか？
スマホで見ると
スマホ画面の幅にちょうど
ぴったりサイズに収まってるでしょ？

パソコンからみても
iPadからみても
どのスマホからみても

スマホ画面ぴったりサイズに
なるように自動的にサイズが変更されます。

100%にすると幅ぴったりですが
少し余白を作りたい場合は

90%とか80%にして
数字を調整するとうまくいきます。

ぜひ試してみてください＾＾

いつもありがとうございます!!