Web,YouTube,コード,プラグインなし

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

Posted on by Web

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

手順１：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>

手順２：css追加

cssを追加していきます。

.yt {
    width: 100%;
    aspect-ratio: 16 / 9;
}
.yt iframe {
    width: 100%;
    height: 100%;
}

完成

以上、簡単な方法ですので是非お試しください。

Web
Web

We部（ウェブ）です。Web関連の記事や商品を投稿しています。記事の内容より良いアイデアや方法がありましたら是非コメントしてください。

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

プラグインなし！シンタックスハイライトPrism.jsの使い方｜WordPress
2020-08-03

今回はWordPressに、プラグインを使わずにシンタックスハイライトを実装する方法をご紹介します。 Webサイトやブログサイトなどにソースコードを表示させる場合に、シンタックスハイライトを使うことが...

3 コメント

続きを見る

Web スピード

Webサイトの表示速度を加速させる画像圧縮Webツール。
2022-09-03

Webサイトの表示速度を向上させるためには、いくつか方法がありますが、まずは画像のサイズを最適化することが効果的です。 その場合は下記のような画像圧縮Webツールを利用することをおすすめします。 メリ...

続きを見る

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

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

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

続きを見る

Web Wordpress スピード

WordPressでページ速度を最適化する方法。WordPress
2022-09-03

Webページが最初の2秒以内に読み込まれないと、モバイルユーザーの55%がそのWebページを離脱してしまいます。 さらに、オンラインストアでは消費者の約70%がページ表示の速度が商品を購入するための意...

続きを見る

Web Wordpress コード セキュリティ

wp-config.phpへのアクセスを禁止する方法。WordPress
2022-08-28

wp-config.phpへのアクセスを禁止するとサイトのセキュリティが向上します。 Webサイトを保守するために、是非参考にされてみてください。 「.htaccess」ファイルに下記コードを記述して...

続きを見る

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

プラグインなし！Woocommerce のマイアカウントページに任意の項目だけ表示させる方法。
2023-07-28

Woocommerceのマイアカウントページの項目は扱う商品やそのサイトによって異なります。 例えば「ダッシュボード」項目と「ダウンロード」項目を非表示にさせたい場合は下記のようにすると実現できます。...

続きを見る

健康

長生きする方法
2023-10-20

1. 喫煙しない2. 適度な運動3. 栄養バランスの良い食事4. 健康的な体重の維持5. 良質な睡眠6. ストレスをためないようにする7. まとめ 喫煙しない 長生きするための最善の方法はいくつかあり...

続きを見る

Web Wordpress コード セキュリティ

php.iniの情報を隠す方法。WordPress
2022-08-28

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

続きを見る

植物

Copiapoa cinerea var. cinerea コピアポア シネレア 黒王丸
2023-07-28

黒王丸 コピアポア・シネレア Copiapoa cinerea は、「白サボテン」と呼ばれ日本で最も人気の高いサボテンと言っても過言ではありません。 肌が特に白く、真っ黒のトゲの個体は高値で取引されて...

続きを見る

スポンサー

Frecer（フリッカー）スポンサー募集開始しました！
2024-09-01

この度、Frecer（フリッカー）スポンサーの募集を開始させていただきました。 スポンサー 様々なプランや特典をご用意させていただいております。 ご支援いただきました資金は、数あるプロジェクトの実現の...

続きを見る

コメントを残す

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