スマホでYouTubeの画面のアクセプト比を保つ方法
はじめに
この記事はブログに埋め込んだYouTube動画をアクセプト比を保って表示する方法の説明です。
後で説明しますが、普通にYouTube動画を埋め込むとスマホでは画面が崩れてしまうのでレスポンシブ対応が必要です。
画面が崩れて整ってないブログは訪問者が離脱する原因になるので、SEOの観点からも対策が必要です。
これから説明する対策は、Webサイトの品質アップに役立つので、是非お試し下さい。
レスポンシブ未対応の場合
まず何もしない例です。
Mariah Careyの"All I Want For Christmas Is You"をテストで埋め込んでみました。
YouTube動画の「共有」をクリック
「埋め込む」をクリック
「コピー」をクリック
コピーしたコードを記事に埋め込んで終了です。
この動画は上記コードを埋め込んだだけでなので、レスポンシブ未対応です。
YouTube動画のレスポンシブ対応
記事内への埋め込み方法
①記事作成をHTMLビューに切り替えます。
②レスポンシブ対応のCSSを記事のトップに貼り付けます。
③レスポンシブ対応のHTMLを記事に貼り付けます。
④YouTube動画の埋め込みタグをレスポンシブ対応のHTML内に貼り付けます。
レスポンシブ対応のCSS
padding-top
を使った方法
コード
<style type="text/css">
.youtube-warpper {
position: relative;
width: 100%;
}
.youtube-warpper:before {
content: "";
display: block;
padding-top: calc(9 / 16 * 100%);/*アスペクト比 16:9 -> 56.25% */
overflow: hidden;
}
.youtube-warpper iframe {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.youtube-warpper-center {
margin: 30px auto; /* 中央に配置 */
}
</style>
aspect-ratio
を使った方法
コード
<style type="text/css">
.youtube-warpper iframe {
position: relative;
width: 100%;
height: auto;
aspect-ratio: 16/9;/*アスペクト比 16:9 -> 56.25% */
top: 0;
left: 0;
}
.youtube-warpper-center {
margin: 30px auto; /* 中央に配置 */
}
</style>
コードが半分になって、スッキリしました。
注意
aspect-ratio
はiOS15以降から対応なので、iOSが古いiPhoneでは正しく表示されません。iOS14以前がサポート対象外になったのち、切り替えた方が安全だと思います。レスポンシブ対応のHTML
表示する動画の幅を指定する場合は、style="max-width: 〇〇〇px;"
で調整して下さい。指定なしの場合は記事の幅横いっぱいに動画が表示されますが、style属性はすべて削除して下さい。コード
<div class="youtube-warpper-center" style="max-width: 300px;"> <!-- YouTube動画の表示サイズ幅 -->
<div class="youtube-warpper">
<!-- ココにYouTube動画の埋め込みタグを入れる <iframe ~></iframe> -->
</div>
</div>
max-width:250px
max-width:350px
max-width:500px
YouTubeの装飾
もうすぐクリスマスなので、お遊びでYouTube動画を装飾してみました。
興味がある方は、Akira先生の記事を参照して遊んでみて下さい。

YouTubeを飾ってみる
今回は完全に遊びです。 YouTubeなどの動画を着飾ってみる。たまにはそういうのも良いかな。と (´・ω・`)...
Justin Bieberのクリスマス・アルバム"Mistletoe"のOfficial Music Videoも飾ってみました。
この動画は4Kなので、4Kディスプレイの方は全画面表示で楽しんで下さい。
まとめ
YouTube動画の埋め込みコードをHTMLで加工しCSSで味付けすることでレスポンシブ対応に修正できました。
便利なCSSを使ってYouTubeをお楽しみ下さい。
気軽に足跡残してね!
この記事が「気になった・参考になった」と感じた方は、リアクションボタンか、ツイッターで♡いいねを押して、足跡を残して頂けると嬉しいです。
https://t.co/t4mlvD9sFS
— heavy-peat (@AfterWork_Lab) December 6, 2020
スマホでYouTube動画をレスポンシブ表示するカスタマイズです。#youtube #responsive #HTML #CSS #Blogger
それでは今回の記事はこれでおしまい。