標題について結論から言えば、比較的新しいCSSプロパティの「aspect-ratio」を使うものです。以下、従来多く採用されていた手法から此処に至る状況などを記します。2024年版とは口幅ったいですが、環境の変化などから生じた比較的新しい手法を、備忘録的に書き残した時期が今年2024年ということでご容赦願いたく思います。
レスポンシブとは？
表示される縦横の寸法が定まっていれば、本来此の記事に記す如き厄介な手法を使う必要もありません。では、YouTubeなどをホームページに埋め込む際に、何故、標題に記す処のレスポンシブ対応などが必要になるのでしょうか。
近年のホームページに於いてはネットの雄Googleの後押しも有ってか、「レスポンシブ」なる手法が採用されるケースが多く見られます。「レスポンシブ」とは一々「レスポンシブWEBデザイン」と言うのが面倒で、最初の部分を取って称するもので、英語の「responsive」が反応する、とか、敏感な、とか言う意味の形容詞で有る如く、反応するWEBデザインです。では、何に反応するかと言えばブラウザの幅に反応するのであって、幅に応じて姿形を変えるデザインを意味しています。斯く言う本サイトもレスポンシブを採用しています。
以前、ホームページはパソコンで見るものと相場が決まっていた時期には此の様な面倒な処置も必要有りませんでしたが、世の中にスマホが普及するに連れ、一般にスマホでもホームページが多く閲覧される様になり、状況の移り変わる過渡期、端境期に於いてはWordPressにもPCとスマホで表示のテーマを分けるプラグインなども有りました。詰まり現在のホームページでは基本横長画面のPC用と縦長画面のスマホ用に最適化した、最低二つの表示様式を用意しなければならなくなりました。
開発機：MacBook Air M1 2020
MacOSバージョン：macOS Sonoma 14.4.1（23E224）
Xcode 15.2（15C500b）
言語：Swift
主関連アプリ：ゲッチュンポン
全てのホームページを処理せんと目論むGoogleに取っては此れが余りにも煩雑で、スマホとPCで別物が表示されるのは処理に手間が掛かって叶わん、ペナルティを課す、と言うことでは中々検索エンジンの胴元には逆らい得ませんからレスポンシブが普及するに至ったのでした。対して実際用意する方の手間は二つ用意するより煩雑で、遥かに高い技術力を要し、同じき報酬で対応する業者には傍迷惑な要求でしたが、しかし、ワンソースマルチユースの構造は、メンテナンスの際に複数箇所に向き合う不経済を避けるメリットも有りました。
実際にYouTube動画を埋め込む
今時の少し足りない風に言えば論よりエビデンス、先ずは本サイトでシステムに採用しているWordPress所与のブロックエディターを利用してYouTube動画を埋め込んでみましょう。WordPressからYouTube埋め込みブロックを選択して当該アドレスを入力すれば完了と言う簡単な手順でホームページへの動画埋め込みを実行出来る優れものブロックです。埋め込むのは近年流行りの一分以内の縦型画面のYouTubeに「ショート」と称される動画にて、頃日本ブログ執筆者のローンチしたiPhoneゲームアプリ『ゲッチュンポン』のプロモーション動画です。
『ゲッチュンポン』のプロモーションに於いては諸所の登録サイトに此の動画を埋め込んだりもして、しかし横長しか対応されておらず、縦長を登録してエラーが表示されるばかりの腹立ち紛れの儘に放置しているものも有りますが、此処では流石にネットに長けたYouTubeとWordPressの合わせ技にて見事にレスポンシブ対応されています。ところが拙いことに折角の縦長「ショート」動画が常に左右に長めの余白を保った状態で表示されてしまってもいるのはご覧の論よりエビデンス。PCでは兎も角、スマホ閲覧の際にはせめてもう少し余白を減らして縦長に表示して欲しくは感じられます。
Google頼みの手法
WordPressにはブロックの一つに「カスタムHTML」も用意されています。此方は諸々数値など自動処理されるものではないのに加え、ホームページを構成する裏方のHTMLコード迄全て自前で用意する必要が有りますが、其れさえ叶えばWordPressの記事内に内容而已ならずサイズからレイアウト迄自由な構造を描き得るもので、ホームページ作成に長けた向きには大いに利用されているブロックです。此方を利用してYouTube動画を埋め込む手法は、では如何でしょうか。
扨、以前はYouTubeに代表される「iframe」を以て他サイトの情報を埋め込む手法に於いてレスポンシブを実現する際には、CSSハック的なpadding-top、padding-bottomが用いられていました。実際に此処で埋め込んでみましょう。其れには先ずYouTube動画の埋め込みコードが必要になります。YouTube「ショート」に於いては画像の如く動画上で右クリックして「埋め込みコードをコピー」を選択すればクリップボードに以下のコードが得られます。
<iframe width="360" height="640" src="https://www.youtube.com/embed/5DGMLE48YZM" title="ブランニューiPhoneゲームアプリ『ゲッチュンポン』PV先行公開 #GetYouNPonG #Game #Action #Puzzle #Phyiscs #Jazz" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>此れを見れば単純に埋め込むならYouTubeの埋め込みコードを其の儘、WordPressであれば「カスタムHTML」にコピペすれば良さそうなものですが、此れは此れで問題が有ります。
実はPC画面で見た場合に、上手く左に寄ってくれているのは「カスタムHTML」ブロックであるのを活かして「ifram」のスタイルにインラインで「float: left;」を書き加えているからです。更には寸詰まり感を避ける為に「margint-rigth: 1em;」を加えているので、左に寄った動画の右側をテキスト本文が一文字分の余裕を持って回り込んでいる筈です。
加えてGoogleが「iframe」をレンダリングする際にJavaScriptを以て後付けて「max-width: 100%;」と端末幅に仍って「max-height」を軽く確認した所では「450px」「602px」「763px」「973px」「1123px」「1662px」などの要素を書き加えている様で、恐らくは表示幅を取得した上で自らが指定した「width="360"」「height="640"」に於ける最低限のアスペクト比を満足させ得る高さを自動的に変更して追記しているのだと思われます。自らが指定した高さより低い「450px」「602px」などが指定されている部分はブラウザの幅を「width="360"」以下に絞って表示して得られた所の値で、而してGoogleが計算を以てアスペクトの乱れに対応してくれているのが分かります。従って此処にもYouTube動画の埋め込みであれば、Googleに頼ったレスポンシブ化の効果が得られるのでした。
しかし、残念ながら問題は残るもので、PC画面や論理幅360px以下のスマホ画面での閲覧には問題ありませんが、360pxから少し余るような400pxから500pxの間の様な表示幅に於いては、僅か100px程の隙間を文字が埋めることとなって縦長の動画を避けたテキストが横に狭い儘、縦に長く表示されるのですから、読み難いこと此の上有りません。此れを避けるには、一般的にスマホとの閾値に用いられる「768px」など然るべきブレークポイントに於いては「float」を解除し、「margin」は左右の中心に表示される様な配慮が必要となります。
此処に記した問題の惹起するスマホで閲覧の向きには見辛い画面を提供しているのでしたが、以上の如き事情のサンプルにてご寛恕願いたく思います。
従来の手法
上記状況から編み出されたのが従来の方法でした。此の手法ではGoogleの様に自動で高さ調整してくれる訳でもない埋め込みiframe機能を提供してくれているサービスでも利用可能であったので、唯見る側の一般人は与り知らぬでしょうが、其の方面には大いに普及しました。
要点はラップに有ります。提供される「iframe」を一旦「div」などのブロック要素で包んでしまい、此の上っ皮のブロックにレスポンシブ対応のスタイルを適用しようというものでした。中のYouTubeなどの「iframe」は其の上っ面に従い上下にも左右にも一杯に表示させておこう、という趣旨で、此の手法を初めて目にした際には世の中には利口な人が居るものだと感心させられてもので大いに利用させて貰いました。
では此処に実際に埋め込んで見ましょう。PC画面では埋め込んだYouTube動画が右に寄って見え、論理幅768px以下のスマホ画面では縦長のYouTube動画が左右を排して真ん中に寄って見えている筈です。上で「ifram」のスタイルにインラインで書き加えいた「float: left;」及び「margint-rigth: 1em;」は「iframe」のタグから取り出して「iframe」を括る「div」タグにスタイルとして適用しています。タグ内に記すのはメディアクエリーを以てレイアウトを変更せしめるに仍って長くなる為、可読性も考えてタグ外に書き出しており、此れもWordPressの「カスタムHTML」ブロックのメリットと言えます。
余談ですが此処に「此処に」と書いた具合に、「左に」とも「上に」とも示す表示に位置を確定指定出来なくなるのが「レスポンシブ」のもどかしい所でもあり、ワンソース・マルチユースにて本文を共有しながらも複数のレイアウトに対応するには、本文にも其れなりの配慮が必要になる実例でもあります。
余談序でに此れを実現するソースもスタイル及びHTML共に以下に記しておきましょう。HTMLはYouTubeから受け取り上で示した埋め込みコード其の儘に、此れを括る<div>タグに「wrap-iframe-240618」を指定して、メディアクエリーで768pxをブレークポイントに指定しています。
<style>
.wrap-iframe-240618 {
position: relative;
width: 340px;
padding-top: 56.25%;
float: right;
margin-left: 1em;
}
.wrap-iframe-240618 iframe {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
}
@media screen and (max-width: 768px) {
.wrap-iframe-240618 {
width: 90%;
max-width: 360px;
padding-top: 100%;
float: initial;
margin: 0 auto 1em auto;
}
}
</style>
<div class="wrap-iframe-240618">
<iframe width="360" height="640" src="https://www.youtube.com/embed/5DGMLE48YZM" title="ブランニューiPhoneゲームアプリ『ゲッチュンポン』PV先行公開 #GetYouNPonG #Game #Action #Puzzle #Phyiscs #Jazz" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>ポイントはPC画面（768px以上想定）に於ける「padding-top: 56.25%;」なる記述で此の値はYouTube指定する所の「width="360" height="640"」の幅を高さで割って得られます。此の高さ分をiframeを括る要素に余白指定しており、更には「position: relative;」と此れを基準指定して、「iframe」は「position: absolute;」として位置を準じさせ、上も左も一杯に寄せる様に指定していますので、括りの作り出した枠に幅も高さも一杯に表示される、と言う塩梅です。此の手法はiframeを括る要素に余白を以てスペースを生ぜしめる為、実際には「padding-top」でも「padding-bottom」でも構わないのですが、「Padding-Top Hack」と言い習わされている様です。
iFrame埋め込みのレスポンシブ対応2024年版
次は本記事の主眼となるレスポンシブ対応2024年版を用いたiframeの埋め込みで冒頭に記した様にCSSプロパティに「aspect-ratio」を用います。此れも此処に実際に埋め込んで見ましょう。
埋め込め結果の新旧両者を気を付けて見ると、少し違いが分かるのがYouTube動画の埋め込まれた中に於ける左右の余白です。実際に数値を見てみれば従来の「padding-top／padding-bottom」、所謂「Padding-Top Hack」を用いた手法ではYouTubeが「max-width:640px;」と追記指定しても少し足らない縦寸法となっているのに対し、「aspect-ratio」を用いた2024年版ではピタリと縦寸法が「640px」指定通りに表示されています。此れはアスペクト比の実現を2024年版では其れ専用のプロパティを用いているのに対し、従来の手法では余白を以て宛て合っているのですが、余白の割合の基準となるのが随時変化する横幅にて、常にはピタリと合わせるのに困難であることに起因します。
又、下に実際のコードを記し置きもしますが、見れば「position」の記述は必要なくなり、従って内部に括られるiframeにも「top」だの「left」だのの記述も不要となって随分とスッキリします。加えて「Padding-Top Hack」では百分率表示していたものが、分数を値として受容する「aspect-ratio」に於いてはYouTubeの埋め込みコードを見て其の儘「360 / 640」とすれば宜しく、此れを「Padding-Top Hack」で真似ようとすれば直接は与えられませんので間接的に「calc( 360 / 640 )」とでもする必要が有って、煩雑さが増してしまい、何しろ専用として生まれた新CSSプロパティの筋の良さが窺われもします。
此方も従来の「Padding-Top Hack」手法を実現したソースと同じく、下にスタイルとHTML、両ソースを記し置きます。上と比較すれば、当該関連以外のソースも多くは混じりもしますので少し分かりにくですが、整理された感が多少は傍観者であってさえ知れるでしょう。実際に書く身としては随分手間が減じられた様に感じます。
<style>
.wrap-iframe-240619 {
width: 340px;
aspect-ratio: 360 / 640;
float: left;
margin-right: 1em;
}
.wrap-iframe-240619 iframe {
width: 100%;
height: 100%;
}
@media screen and (max-width: 768px) {
.wrap-iframe-240619 {
width: 90%;
max-width: 360px;
float: initial;
margin: 0 auto 1em auto;
}
}
</style>
<div class="wrap-iframe-240619">
<iframe width="360" height="640" src="https://www.youtube.com/embed/5DGMLE48YZM" title="ブランニューiPhoneゲームアプリ『ゲッチュンポン』PV先行公開 #GetYouNPonG #Game #Action #Puzzle #Phyiscs #Jazz" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>まとめ
実際、本記事に最初に動画を埋め込んだWordPressのYouTube埋め込みブロックでは「wp-embed-aspect-16-9」及び「wp-has-aspect-ratio」クラスが自動付与されており、名前から明らかな様にWordPressが自動でアスペクト比を与えています。関しては『unlimited chaos』サイトの2019年9月21日の記事[※1] が理解の助けになるでしょう。しかし本サイトに限ってはWordPress所与のスタイルシートは邪魔に感ぜられ廃していますから、自動的に与えられたクラスは機能せず、別の要因で横長に表示されています。此れはYouTube側の問題でWordPressにては唯に当該アドレスを表示せんとするだけに留まるものの与えるYouTubeが発行する「iframe」タグに寸法が「width="750" height="422"」と、又スタイルが「style="max-width: 100%; max-height: 545px;"」とインラインで書き込まれているのでした。横長に表示される道理です。斯くして「Padding-Top Hack」手法及び本記事に紹介する所の2024年版が有用たらしめられると言う寸法です。
CSSの新プロパティはRECから実装されるに至るも使用環境も限られる当初は慣例的に避けられるものですが、2024年版に肝となる「aspect-ratio」プロパティは2021年の初頭にChrome88」でサポートされ、順次対応ブラウザも増え、同年9月には「Safari15」でサポートされるに至り、凡そ総てのブラウザで使用可能になったもので、現在でも漸く3年程経た所の比較的新しいプロパティですが、既に使用を躊躇われる期間は疾うに過ぎており、積極的な使用が推奨されても宜しいものと考えます。
折角ですので最後に本記事に記した「aspect-ratio」プロパティを利用した2024年版手法を以て、レスポンシブを鑑みて、PC画面では縦長のショート動画と横長の通常動画が横並びに、スマホ画面では此れが縦に並ぶ様に調整して貼り置きます。レイアウトを自由に整えたいと思えば可成り煩雑なコードとなりますが、2024年版手法を以て少しは記述が楽になりました。
猶、縦長のショート動画の方は「Test visual of the Chara Parabola Anime modulated Ini jump, V jump and Hjump」なるタイトルで、此方も本ブログ執筆者の手になるiPhoneゲームアプリ『Balloons Occupy』の製作中にiOSシミュレータでのキャラクターの動きを可視化した動画にて、正方形にも近い一応横長の動画は「ゲーム開発（SpriteKit）に於ける二次関数の適用のビフォー・アフター」なるタイトルで、同じく『Balloons Occupy』の開発に於いてキャラクターの移動元と移動先から放物線を算出し、放物線の頂点が上限を通るように二次ベジエ曲線のコントロールポイントを算出する計算式をSwiftに落とし込む、左が前、右が後のビフォーアフター動画となっており、共にYouTubeに共有したものです。
関連記事
- [WordPress] Gutenberg YouTube埋め込みブロックのアスペクト比を変更する（unlimited chaos：2019年9月21日）
バージョン： 1.0
リリース： 2024年4月24日
更新： 2024年4月24日
サイズ： 25.8 MB
互換性： iOS 17.2以降のiPhone、macOS 14.2以降とApple M1以降のチップを搭載したMac、visionOS 1.1以降のApple Visionに対応。