YouTube動画をWordPressにレスポンシブ埋め込みできるお勧めプラグインはこれだ！

「YouTubeに投稿した動画を自分のワードプレスに埋め込みたい！」、「みんなにも絶対に見て欲しいYouTube動画をブログに埋め込みたい！」と考えている方も多いと思います。

ただ、YouTubeのデフォルトの機能を使って htmlコードを取得し、埋め込む形式だとスマホやタブレットで見たときにちょうどいいサイズで動画が表示されません。

私も自分のブログにYouTube動画を埋め込もうと思っていたときに「うまくレスポンシブ対応させた状態で動画を埋め込む方法はないのかな？」と色々と調べていました。

そして、ワードプレスにYouTube動画を埋め込む際に最もお勧めできるプラグインは「ARVE Advanced Responsive Video Embedder」という結論に達しました。

今回は、動画埋め込みに便利なプラグインであるの「ARVE Advanced Responsive Video Embedder」導入方法から使い方までを解説していきます。

YouTubeから埋め込みコードを取得してサイトへ埋め込む時に発生する問題点

YouTubeには自分のWebサイトに動画を埋め込むために、動画の再生ページから埋め込みコード（html）を取得する機能があります。

この方法でWebサイトへの埋め込みを行っても悪くはないのですが、この方式だとレスポンシブ対応がされません。

この問題点については言葉で説明するよりも、実際の画面イメージを見ていただいたほうが分かりやすいかと思いますので、下の画像を見てみてください。

通常の埋め込みコード（html）を取得する方法でWebサイトやブログにYouTube動画を埋め込み、パソコンから閲覧してみると、この画像のように問題なく表示されます。

パソコンで見てみると、ワードプレスの記事の幅の中にピッタリと納まっており、全く問題ないように見えます。

しかし、この状態でスマホから埋め込んだ動画を見てみると、こんな感じになってしまいます・・・。

「640×360のサイズで埋め込み」といったサイズ指定で埋め込んでしまっているので、スマホやタブレットなど画面サイズが異なる端末で見たときにYouTube動画の部分だけが画面から飛び出してしまうのです。

これでは見た目が不格好ですし、訪問ユーザーが動画を再生しても動画の左の部分しか見ることができません。これでは動画を視聴し始めてもすぐに離脱してしまう可能性が高くなります。

ワードプレスにYouTube動画を埋め込むなら ARVE Advanced Responsive Video Embedder がおすすめ！

上記の問題を解決するために、ワードプレスのプラグインであるARVE Advanced Responsive Video Embedderを導入することをお勧めします。

ARVE Advanced Responsive Video Embedder は、どんな画面サイズの端末から埋め込み動画を見たときでも、YouTube動画を自動でリサイズ（レスポンシブ対応）してくれます。

先の例ではパソコンで見た場合とスマホで見た場合を比較しましたが、パソコンであっても記事に埋め込んだ動画の見え方は変わってきます。

例えば、YouTube動画のサイズを「640×360」で埋め込んだとしても、13インチ前後のモバイルノートパソコンと、20インチを超えるような大きな画面のデスクトップパソコンでは見え方が異なります。

13インチ前後のモバイルノートパソコンであれば記事内にしっかりと収まっていて適切なサイズで表示されますが、20インチを超えるような大画面で見ると埋め込み動画が小さく表示されてしまい、記事の余白が余ってしまうのです。

スマホやタブレット向けの対策としてはもちろんですが、パソコンにも色々な画面サイズが存在することを考慮すると、必ず、ARVE Advanced Responsive Video Embedderを使っていったほうが良いでしょう。

▼おすすめ▼
ビジネス初心者でも稼ぎ始める人が続出！YouTubeで稼ぐ本物のノウハウを無料公開！！

ARVE Advanced Responsive Video Embedder の導入方法

ここからはARVE Advanced Responsive Video Embedderの導入・インストールの方法と使い方を解説していきます。

まずは、ワードプレスにプラグインを導入していきましょう。

ご自身のワードプレスへログインをしたら、「プラグイン」→「新規追加」をクリックします。

画面右にある検索ボックスからプラグインの名称を入力して検索を行います。

検索ボックスに「ARVE Advanced Responsive Video Embedder」と正確に入力しても良いのですが、長いので最初の数文字だけ入力すれば良いでしょう。「ARVE」と入力するだけでも、該当のプラグインが出てきます。

「ARVE Advanced Responsive Video Embedder」を見つけたら「今すぐインストール」をクリックします。

インストールが完了したら「有効化」をクリックして、プラグインを有効化します。

「プラグインを有効化しました。」と表示され、プラグインの一覧に「ARVE Advanced Responsive Video Embedder」が表示されていれば、導入完了です。

ARVE Advanced Responsive Video Embedder をインストール＆有効化しても謎の英語メッセージが表示されてしまい使えない場合の対処法

プラグインのインストールが完了すると、記事作成画面に「Embed Video (ARVE)」というボタンが追加されます。

このボタンを押すことで、記事内にYouTube動画を簡単に埋め込めるようになるのですが・・・実際にクリックしてみると、次の画像のようなメッセージが表示されてしまうことがあると思います。

ARVE Optional Features

This button can open a optional ARVE a Shortcode creation dialog. ARVE needs the Shortcode UI plugin active for this fuctionality.

The “Shortcake (Shortcode UI)” plugin also adds What You See Is What You Get functionality to WordPress visual post editor.

It is perfectly fine to pass on this and manually write shortcodes or don’t use shortcodes at all, but it makes things easier.

ざっくりと言うと、「ARVE Advanced Responsive Video Embedderを使うためにはショートコード系のプラグインを導入しないとダメですよ」という話です。

ショートコード系のプラグインの種類は問わないため、すでに何らかのショートコード系プラグインを導入している場合は、上のエラーメッセージは表示されず、普通に動画の挿入が可能です。

もし、上のメッセージが表示されてしまった場合は、ショートコード系のプラグインを導入していきましょう。

「プラグイン」→「新規追加」の右側にある検索ボックスに「Shortcode」と入力すると、様々なショートコード系のプラグインが表示されます。

基本的にはどのプラグインを導入しても動くとは思うのですが、私の場合は「Shortcake (Shortcode UI)」というプラグインを使っています。

こだわりがなければ、導入後、特に問題が起きておらず、動作することも確認できている「Shortcake (Shortcode UI)」を使う形で良いと思います。

検索ボックスに「Shortcake (Shortcode UI)」と入力すると、Shortcake (Shortcode UI)が表示されますので、「今すぐインストール」をクリックし、有効化します。

私はずっと「ARVE Advanced Responsive Video Embedder」×「Shortcake (Shortcode UI)」の組み合わせで使っていますので、この組み合わせをお勧めしています。

▼おすすめ▼
ビジネス初心者でも稼ぎ始める人が続出！YouTubeで稼ぐ本物のノウハウを無料公開！！

ARVE Advanced Responsive Video Embedder の使い方：ワードプレスの記事にYouTube動画を埋め込んでみましょう！

ARVE Advanced Responsive Video Embedderをインストールして有効化後、YouTube動画を埋め込みたい記事の編集画面を開きます。

動画を埋め込みたい場所にカーソルを合わせ、「Embed Video(ARVE)」をクリックします。

すると、ARVEの画面が表示されます。

英語で表示されているので、英語が苦手な人は少し戸惑うかもしれませんが、入力する箇所はシンプルなので心配いりません。

入力すべき項目は2つだけです。

「URL / Embed Code」という箇所に埋め込みたい動画のURLを入力します。このURLは普通にブラウザのアドレスバーに表示されるURLでもいいですし、YouTubeの動画再生ページで発行できる短縮URLでもどちらでもいいです。

「Title」の箇所には動画のタイトルを入力します。このタイトルは、YouTube動画に設定されている動画タイトルと一致していなくても問題ありません。どちらかと言うと、画像のaltタグのような存在だと思われます。

極論、タイトルを設定しても設定しなくてもSEO上の優劣はそこまで変わらないと思います。

埋め込む動画のURLとタイトルの入力が完了したら、右下にある「更新」ボタンを押せば、埋め込み完了です。

記事編集画面にも埋め込んだ動画がプレビューで表示されます。

実際に、ARVE Advanced Responsive Video Embedderを使って埋め込みを行うと、下の画像のように表示されます。

私のパソコン画面で表示した時の画面ですが、ディスプレイサイズを判断して自動でリサイズし、記事の枠いっぱいの大きさで表示してくれます。

このため、大型ディスプレイで表示した場合にも記事の枠いっぱいの大きさで動画が表示されます。

パソコン画面だと違いが分かりにくいかもしれませんが、スマホで表示した時のキャプチャを見ていただくと違いがよく分かると思います。

ARVE Advanced Responsive Video EmbedderでYouTube動画を埋め込んだ記事をスマホで表示した場合がこちらです。

自動でスマホ画面のサイズに適した形でリサイズされます。（＝レスポンシブ対応）

冒頭でお見せしたように、通常の埋め込みコードを取得して埋め込みを行うと、動画のサイズが固定されてしまうため、スマホの画面から動画がはみ出してしまいました。

しかし、ARVE Advanced Responsive Video Embedderを使えば、きちんとスマホ画面の枠内に収めてくれます。

もちろん、サイズが違うスマホやもっと大きい画面のタブレット端末でも、しっかりと自動でリサイズされて画面内の適切なサイズで収まるようになります。

私もブログにYouTube動画を埋め込みたくて、色々な方法を調べて、いくつかのプラグインを導入してみましたが、結局、ARVE Advanced Responsive Video Embedder が一番良い解決方法でした。

ARVE Advanced Responsive Video Embedder は本当に便利なプラグインなので、自分で作ったYouTube動画や誰かのYouTube動画をワードプレスに埋め込みたい場合はぜひ使ってみてください。

あと、もし貴方が自分のYouTube動画を自分のワードプレスブログに埋め込もうと思っているのであれば、YouTube動画自体の再生回数を伸ばすことにも興味があるのではないでしょうか。

「自分が投稿したYouTube動画の再生回数を伸ばしていきたい！」と考えているのであれば、YouTubeで成功すためのノウハウ・ハウツーを公開している下記の無料メール講座もおすすめです。

↓　↓　↓　↓　↓

YouTube動画の再生回数を伸ばすノウハウを知ることができる無料メール講座