CSSでYouTubeの埋め込みを比率維持したままレスポンシブ対応させる方法。

YouTubeの埋め込みを比率維持したままレスポンシブ対応させる方法をご紹介します。

手順1:divタグ追加

iframeタグを囲うようdivタグを追加します。

<div class="yt"><iframe width="560" height="315" src="https://www.youtube.com/embed/poQlNeb7a-U?si=3f6M3b0t2lnHaBH_" 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 コード プラグインなし

プラグインなし!コピペで3分超簡単!ダークモードの実装方法。WordPress

ダークモードをWordPressに実装します。プラグインは必要ありません。 1. 1.JavaScriptの記述2. 2.Cssの記述3. 3.HTMLの記述 1.JavaScriptの記述 ヘッダー...

続きを見る

Web Wordpress コード プラグインなし

プラグインなし!簡単コピペ。WordPress にサイト名のショートコードを追加する方法。

サイトを複数制作する際にサイト名を書き換えるのは非常に手間です。 これを未然に防ぐ方法としてショートコードでサイト名を呼び出すシステムを組んでおくことをおすすめします。 「functions.php」...

続きを見る

ショップ 入荷情報

2024年12月入荷予定

12月も続々登場します! 予約販売も承っております。数に限りがございますのでご希望の場合はお早めにご注文いただけますと幸いです。

続きを見る

Web Wordpress コード スピード

コンタクトフォーム7(Contact Form 7)指定ページのみjsとcssを読み込ませる方法。|WordPress

WordPressで、プラグインを使わずにContactForm7のjsとcssを指定ページのみ読み込ませる方法をご紹介します。 通常ContactForm7を導入すると、すべてのページでjsとcss...

続きを見る

Web Wordpress コード セキュリティ

php.iniの情報を隠す方法。WordPress

php.ini情報を隠すとサイトのセキュリティが向上します。 Webサイトを保守するために、是非参考にされてみてください。 1. 「php.ini」ファイルに記述2. 「.htaccess」ファイルに...

続きを見る

Web Wordpress コード スピード プラグインなし

プラグインなし!目次を実装する方法。|WordPress

WordPressで、プラグインを使わずに目次を実装する方法をご紹介します。 JQueryを使わない方法で、本サイトでも導入している実装方法になります。 時間もかからず工数も少ないので、宜しければご参...

続きを見る

Web コード プラグインなし

wp-config.phpにとりあえず書いとくやつ。

define( 'WP_DEBUG', false ); ini_set('display_errors','Off'); define('ALLOW_UNFILTERED_UPLOADS', tru...

続きを見る

Web コード プラグインなし

長いリンク(URL)がはみ出すときのCSS。スマホでも対策OK!

スマートフォンで見ると、長いリンクが横にはみ出している場合があります。そんなときは下記スタイルで対処できます。 a{word-break: break-all;}

続きを見る

環境問題 移住

日本沈没は本当!?東京、千葉、埼玉、茨城はほとんど沈没(千葉は島化)。札幌、仙台、名古屋、大阪、沖縄等も沈没予想。温暖化・沸騰化で南極の氷(淡水)が溶ける。早めの移住と首都移動を。

今世界は「温暖化」を通り越し「沸騰化」に突入しています。 淡水である南極の氷が解け切った場合、海面が約60m(大体20階建てくらいのビルの高さ)上昇すると言われており、シミュレーションしてみたところ関...

続きを見る

Web Wordpress コード

リンクの書き換えを省く方法。WordPress

複数のWordpressサイトを構築していると、複製する際に「URLを書き換える」という作業が面倒という問題に直面します。 この問題を未然に解決するためには下記のコードがおすすめです。 テーマの「fu...

続きを見る

コメントを残す

本サイトは、皆様に快適な閲覧をご提供させていただくためにcookieを使用しています。cookieの使用に同意しますか?