埋め込んだYouTube動画のページをスマホで見たときに、サイズが「最適化されていない」ということがあります。
こんな感じですね。
左が変更前、右が変更後のYouTube動画です。
この記事では、ワードプレスに動画を埋め込んだ際にも正しいサイズが表示されるようにする方法（レスポンシブ対応）をお伝えします。
やり方は非常に簡単で、２ステップで完了します。
CSSをいいったり、ましてや「functions.php」をいじる必要も一切ありません。
※ 「functions.php」を知識なく編集するのは非常に危険です。
最悪の場合サイトが消えてしまい、修復不可能になりますのでお気をつけください。
この記事を書くにあたり、ネット上の情報を確認しましたが、簡単安全にできる方法が書かれている記事がありませんでした。
今回お伝えする方法は、知識がなくても簡単に誰でもできる方法をご紹介しますので、是非参考にしてみください！
目次
ワードプレスにYouTube動画をレスポンシブで埋め込む２ステップ
WordPressにYouTube動画をレスポンシブで埋め込む方法は、以下の２ステップで完了します！
- プラグインを２つインストールする
- YouTube動画を埋め込む
２つのプラグインをインストールし、埋め込みたいページにYouTube動画を埋め込む。
やることはこれだけです！
非常にシンプルですね。
では、一つずつ説明していきます！
１．プラグインを２つインストール
インストールするのは、この２つのプラグイン 。
- ARVE Advanced Responsive Video Embedder
- Shortcake (Shortcode UI)
それぞれ、いつも通りプラグイン新規追加からインストールします。
インストールが完了したら、「有効化」しておくだけで、特に細かい設置は必要ありません。
補足すると、なぜ二つもプラグインを入れる必要があるのかというと、「ARVE Advanced Responsive Video Embedder」は単体では機能しない仕様だからです。
理由はただそれだけ。
ショートコードのプラグインを入れないと使えないため、「Shortcake (Shortcode UI)」もインストールするということです。
２．YouTube動画を埋め込む３ステップ
プラグインがインストールできたら、あとはYouTube動画を埋め込むだけ。
ただ、プラグインを利用するため、埋め込み方が通常のYouTube動画の埋め込み方と異なりますので解説します。
ただ設置方法は非常にシンプルですのでご安心ください。
１．Embed Video（ARVE）をクリック
プラグインをインストールすると、記事投稿ページのタイトルの下に「Embed Video（ARVE）」というボタンが表示されるようになります。
埋め込みたい場所にカーソルを当てて、「Embed Video（ARVE）」ボタンをクリックします。
２．YouTube動画のURLを入力し更新ボタンをクリック
表示された画面のURL欄に、埋め込みたい動画のURLを貼り付けます。
※動画のURLはショートコードでも問題なく機能します。
URLを入れたら、「更新」ボタンを押します。
動画のURLはこちらから取得することが可能です↓
YouTube動画のURL取得方法
ステップ１：「共有」をクリック
埋め込みたいYouTube動画の「共有」ボタンをクリックします。
ステップ２：URLをコピー
動画のURlをコピーします。
動画を中央寄せにしたい場合は、「Mode」という項目で設定できます。
３．タグを確認
更新ボタンを押すとスクロールを置いていた場所に下記のようなコードが表示されます。
※例では、タイトルも表示されていますが、これはどちらでも問題ないです。
この状態で完了です。
スマホでプレビューを見ると、縦横の比率が最適化された状態で表示されていることを確認できます。
ちなみに、PC画面でスマホ表示を確認する方法についてはこちらの記事で解説しています。
もしご存知なければ、こちらも合わせてご覧ください。
【関連記事】ワードプレスのデザイン（CSS）をテストしながら簡単に変更する方法
記事の初めにもご紹介しましたが、左側は普通に設置したYouTube動画で、右側は今回プラグインを使って設置したYouTube動画です。
ちゃんと最適化されていることがわかりますね！
ここまでで埋め込み方法の説明は終わりなんですが、そもそも「Embed Video（ARVE）」ボタンが表示されてないぞ！
という方もいるかもしれません。
補足として、「Embed Video（ARVE）」ボタンが表示されない場合の対処方法について解説しておきます。
Embed Video（ARVE）ボタンが表示されていない場合の対処方法
「Embed Video（ARVE）」が表示されない原因は、ワードプレスのバージョンが新しいことです。
その場合は、管理画面を以前のデザイン（Classic Editor）に戻してあげればOKです！
「Classic Editor」エディターへの戻し方は非常に簡単で、「Classic Editor」というプラグインをインストールするだけです。
「Classic Editor」の設定で、「旧エディター」を選択して保存します。
これで「Embed Video（ARVE）」ボタンが投稿欄上部に表示されるようになります。
まとめ
今回は、YouTube動画をワードプレスにレスポンシブ対応で埋め込む方法をご紹介しました。
やり方を簡単におさらいすると、
- プラグインを２つインストールする
- YouTube動画を埋め込む
この２ステップです。
インストールする２つのプラグインは、
- ARVE Advanced Responsive Video Embedder
- Shortcake (Shortcode UI)
でしたね。
特に設定は必要ありません。
動画を埋め込む際は、「Embed Video（ARVE）」ボタンから埋め込む動画のURLを入力するという非常に簡単な方法で完了です。
これでレスポンシブ対応したYouTube動画が埋め込まれます！
今回お伝えした方法であなたの問題が解決したら幸いです。
今後もワードプレスを使ってビジネスをするビジネスマンに、役に立つ情報を発信して行きます。
是非他の記事も参考にしていただけると嬉しいです。
YouTubeでは、私が副業から年収の数倍のお金を稼いだ方法を発信していますので、是非こちらも合わせてご覧ください。
新宮秀也
最新記事 by 新宮秀也 (全て見る)
- ネット副業の詐欺の手口と3つの対策を解説！当てはまったら即辞めてください！ - 2020年1月8日
- フリーランス必見の税金対策完全版！たった3つのことをしておくだけで大丈夫！ - 2020年1月8日
- 【完全保存版】ネットでできる副業のおすすめ15選！あなたの適正とマッチするものが必ず見つかります！ - 2020年1月8日
