YouTubeの埋め込みを比率維持したままレスポンシブ対応させる方法をご紹介します。
手順1:divタグ追加
iframeタグを囲うようdivタグを追加します。
<div class="yt"><iframe width="560" height="315" src="https://www.youtube.com/embed/6qso-Oe20B0?si=4Ngoy6FQV4EXs4xb&controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>
手順2:css追加
cssを追加していきます。
.yt {
width: 100%;
aspect-ratio: 16 / 9;
}
.yt iframe {
width: 100%;
height: 100%;
}
以上、簡単な方法ですので是非お試しください。
Web Wordpress セキュリティ プラグイン
WordPress データベースの接頭辞(プレフィックス)変更プラグイン「Change Table Prefix」
WordPressのセキュリテ...
続きを見るWeb スピード
Webサイトの表示速度を加速させる画像圧縮Webツール。
Webサイトの表示速度を向上さ...
続きを見る植物
ギムノカリキウム バッテリー(Gymnocalycium vatteri) とは?
ギムノカリキウムバッテリーはギ...
続きを見る11月
植物
かっこよくて育てやすい Gymnocalycium ギムノカリキウム属の原産地、由来、育て方。
Gymnocalycium(ギ...
続きを見る7月
Web Wordpress コード プラグインなし
プラグインなし!内部・外部リンク対応のブログカードを表示する方法。|WordPress
WordPressで、プラグイ...
続きを見る