制作・管理ツールスマホPC・MacガジェットアプリMoneyOfficeLife#Amazon#Bluetooth#Composer#CSS#Docker#GAS#GoogleCloud#Googleマップ#Homebrew#HTML#JavaScript#Laravel#Node.js#PHP#ReactNative#SNS#SQL#Tasker#VSCode#WebAPI#Wi-Fi・LAN#WordPress#アクセス解析#サーバー#スプレッドシート#スマートホーム#スマホカメラ#データ通信#ネットショップ#ネット広告#ネット証券#ネット銀行#ファイル共有#ブラウザ#ポイント#不具合#動画アプリ#安い・お得#本・電子書籍#終了・廃止#購入アイテム#電子マネー・電子決済#電話・通話TwitterRSSFeedly2019/10/22Web・App制作#CSS【CSS】YouTube動画などをレスポンシブに対応させる例|iframeの高さ・横幅の比率を維持Webサイトやブログ内に、YouTube動画などの外部コンテンツを埋め込む際にiframe要素を利用しますが、今回は、そのiframe内のコンテンツをデバイスサイズにより可変させる際に、アスペクト比(長辺と短辺の比率)を維持してレスポンシブに対応させる例となります。高さの指定についてアスペクト比の16:9について参考サイトなどiframeをアスペクト比を維持してレスポンシブにする例|YouTube動画など以下、iframe要素をレスポンシブに対応させるHTML・CSSの例となります。例では、iframe内のコンテンツをデバイスサイズにより可変するようにし、コンテンツのアスペクト比は常に16:9にします。HTMLの例HTMLではiframe要素をdiv要素などで囲みます。例のiframeタグはYouTubeの埋め込みコードとなります。allowfullscreen="allowfullscreen"></div>CSSの例CSSではiframe要素とiframe要素の親要素に対して、それぞれのプロパティを指定します。以下、CSSのポイントとなる箇所となります。「iframe要素の親要素」に対して「iframe要素」を絶対配置とするためのpositionプロパティを指定します。56.25%;のプロパティを指定します。「iframe要素」の位置と横幅・高さを指定します。上記CSSにより、iframe要素に親要素のボックスサイズが適用されます。そのことにより、iframe内のコンテンツがデバイスサイズにより可変し、アスペクト比が常に16:9となります。高さの指定についてプロパティpaddingを%の値で指定すると、「親要素の横幅」に対する割合で指定できます。そのため、今回の例では、iframe要素の親要素でpadding-topを利用して高さの割合を指定しています。プロパティheightを%の値で指定すると「親要素の高さ」に対しての割合となるため、親要素に高さが指定されていない場合、heightでは高さを出すことができません。16(0.5625)となるプロパティの値を指定しています。iframe内のコンテンツのアスペクト比を変更する場合には、iframe要素の親要素のプロパティpadding-topの値を変更してみてください。コメントをキャンセルコメントは項目欄(*は必須項目)を入力し、「コメントを送信」ボタンをクリックしてください。(メールアドレスは公開されることはありません。コメントの公開は承認制となります。)また、多忙によりコメントには返信できない場合があります。Twitterで返信する場合はこちらから。DESTROY広告ブロッカーが有効のため、コンテンツ内におすすめ商品などが表示されています。