WordPressへのYoutube埋め込みをしてみたけれど、スマホで確認したらYouTubeの表示が画面からはみ出している、なんてことありますよね。
こちらのページでは、そんな困った状況を解消する方法を、WordPress初心者の方向けにキャプチャ入りで、できるだけ分かりやすい言葉で解説します。
WordPressのサイト内でYouTube動画を快適に視聴してもらえるよう、対策をマスターして改善していきましょう。
YouTubeの埋め込み方法については、こちらでご紹介しています。
WordPressでYoutube埋め込みしたらスマホで「はみ出る」問題
WordPressでYouTubeの埋め込みをしても、スマホでの表示が適切でなければサイトの離脱率も上がってしまいます。
WordPressの投稿はPCですることが多いと思いますが、プレビュー表示はPCだけで済ませていませんか。特に、サイトはスマホでの閲覧が多いので、忘れずにチェックしておきたいところ。
せっかくの動画も、画面が中途半端に切れていては見る気もしないでしょう。では、そうならないための方策をチェックしていきましょう。
WordPressへのYoutube埋め込みとスマホなどへのレスポンシブ対応
PCとスマホでは、表示画面のサイズが全く異なりますよね。
PCの大画面やスマホの小さい画面、タブレットの画面など、様々なサイズの違いに対応するべく、プログラムで画像等を自動的にリサイズさせることを「レスポンシブ化」と言います。
WordPressでYouTubeの埋め込みをして、スマホでもパソコンでも、デバイスの画面サイズに合わせて表示させるためには、このレスポンシブ化が必須なのです。
では、YouTubeの埋め込みをレスポンシブ化するには、どうしたらいいのでしょうか。詳しく見ていきましょう。
WordPressへのYoutube埋め込みでスマホにもレスポンシブ対応させる方法
WordPressへのYoutube埋め込みで、スマホにレスポンシブ対応させる方法について、こちらでは、
- Gutenberg（ブロックエディタ）
- クラシックエディタ
の2つのエディタそれぞれのやり方で解説します。
最近WordPressを導入した方なら、Gutenberg（ブロックエディタ）を使用されている方が多いでしょう。クラシックエディタというのは、WordPressで以前から使用されている投稿エディタです。
編集に使うプログラムのこと
では、Gutenberg（ブロックエディタ）→クラシックエディタの順で、YouTubeの埋め込みをレスポンシブ化する方法を解説していきます。
Gutenberg（ブロックエディタ）でYouTube埋め込みをレスポンシブ化
Gutenbergでは、投稿画面内の＋マークをクリックしてブロックを追加、その中からYouTubeを選びます。
もしも、この画面でYouTubeの表示が無い場合は、下のすべて表示をクリックすれば一覧が表示されます。
以下のように、URL入力欄が表示されるので、ここにYouTubeからコピーしてきたURLを貼り、埋め込みをクリックします。
ここで入力するYouTubeURLというのは、動画下の共有からコピーしてきたURLです。
URLを埋め込みをすると、YouTubeのサムネイルが表示されますので、そのサムネイルの上で左クリックしてください。すると、以下のようにメニューが表示されます。次に、⁝をクリック。
メニューが表示されるので、一番上の追加設定を表示をクリックします。
すると、画面右側に以下の表示が出てきます。ここで、より小さな端末用にリサイズをオン（青くする）にすれば、YouTubeの表示がレスポンシブ化されます。
クラシックエディターでYouTube埋め込みをレスポンシブ化
WordPressのクラシックエディタでYouTubeの埋め込みをして、スマホではみ出してしまう場合は、
- divタグ追加
- CSS追加
この2つの追加を行うことで、YouTubeの埋め込みをレスポンシブ化することができます。
divタグやCSSといった聞き慣れない言葉が出てきますが、できるだけ簡単な方法をお伝えするので見てみてください。
divタグ追加
「divタグ」なんて聞くと戸惑ってしまうかもしれませんが、それほど難しいことではありません。
YouTube動画の共有からリンクURLをコピーしてきます。
このコピーしてきたURLを
<div class=”youtube”> と </div>
で囲むだけ。つまり、
<div class=”youtube”>YouTubeのリンクURL</div>
とするわけです。
まずは、こちらをコピペしてください。
<div class="youtube">★</div>
そして、「★」の部分をYouTubeリンクに置き換え、それをWordPressのテキストエディタで挿入したい部分に貼り付けます。
ちなみに、このリンクURLというのは、YouTube動画の共有でコピーしてきたものです。
WordPressのクラシックエディタでは、ビジュアルとテキストの2種類の投稿方法がありますが、divタグを追加する場合はテキストエディタから入力してください。
CSS追加
WordPressでCSSを追加するというと、難しい印象がありますが、初心者の方でも簡単にできる方法があります。
WordPressの外観メニューにある、追加CSSを利用するのです。これなら、誰でも簡単にCSSの追加が可能です。まず、追加CSSをクリックしてください。
追加CSSをクリックすると、画面左側に以下のような画面が表示されます。この赤い囲みの部分に、以下でご紹介するコードをそのまま全部コピペ、上に出てくる公開ボタンをクリックするだけです。
公開をクリックしないと反映されませんので、忘れないように注意してください。
コピーするコードはこちらです。
.youtube{
position:relative;
width:100%;
padding-top:56.25%;
}
.youtube iframe{
position:absolute;
top:0;
right:0;
width:100%;
height:100%;
}これは、先程divタグで追加した「class=”youtube”」に対しての指示を出すためのコードです。
この中で「padding-top:56.25%」という中途半端なパーセンテージを記載していますが「なんでこの数値？」と気になる方向けに解説します。
56.25%というのは、YouTubeで推奨されているアスペクト比16:9から「9÷16＝0.5625」で算出される数値。
アスペクト比16:9だから56.25％、つまり、横100としたら高さが56.25となるわけですね。
この56.25％という数値を「親要素の横幅を基準に設定してね」という指示をするのが「padding-top」というプロパティなのです。
難しい説明になってしまいましたが、意味がわからなくても大丈夫です。
divタグの追加をしたYouTubeリンクを貼り、CSSにコードを追加すれば、YouTubeを適切なサイズで表示してくれます。このCSS追加の作業は、最初に一度だけやればOK。その後、YouTube動画を投稿する際には、divタグの追加をするだけで、レスポンシブ化が反映されます。
WordPresでYoutube埋め込みしたらスマホではみ出した！を解消せよ
WordPressでYouTube埋め込みしたら、スマホではみ出してしまった！という場合は、エディタに合わせて、ここまで解説した内容を試してみてください。
クラシックエディタの場合、コードが出てくるため「難しそうでお手上げ！」となってしまうかもしれませんが、大事なのは、コピペして適切な場所に設置するだけ。やってみればそれほど難しいことはありませんので、是非挑戦してみてください。
この方法でYouTubeの埋め込みをレスポンシブ化すれば、スマホでもタブレットでも、しっかり画面にフィットした快適サイズで表示されます。