レスポンシブとは、どのデバイス（PC・スマホ・タブレットなど）で見ても「サイズが整っていて見やすい」ことです。
個別にYoutubeの埋め込みサイズを調節しなくても、HTMLとCSSで一括解決できるので設定しておきましょう。
Youtubeのレスポンシブ対応方法
方法は、HMTLとCSSへ特定のコードを追加するだけです。
ひとつずつコピペして設定してください。
レスポンシブ対応 HTMLへの記載
Youtubeの埋め込みコードを下記コードで囲みます。
<div> Youtube埋め込みコード </div>
|
1 2 3 |
<div class="youtube"> <iframe width="560" height="315" src="https://www.youtube.com/embed/cKf4cqx3MXQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> |
レスポンシブ対応 CSSへの記載
外観 ⇨ カスタマイズ ⇨ 追加CSS に下記コードをコピペ貼り付け・公開します。
|
1 2 3 4 5 6 7 8 |
.youtube { width: 100%; aspect-ratio: 16 / 9; } .youtube iframe { width: 100%; height: 100%; } |
これで完了です。
WordPressへのYoutubeの埋め込み方法が分からない場合はこちらで解説しています！
関連記事
Youtubeの動画をWordPressへ載せる方法を分かりやすく解説します。 【WPブログ】Youtubeの埋め込み方法 埋め込みたいYoutube動画を開きます。 「共有」 ⇨ 「埋め込む」 […]
