WordPressにYouTube動画を綺麗に埋め込む4つの方法

WordPressの記事内に、YouTubeの動画を掲載したいという時があるかと思います。

「文字だけでは説明するのが難しい」

「動画だったら伝わりやすいのに……」

記事を作成する中で、そのように思われる方も少なくないのではないでしょうか？

実際、動画を掲載することで、サイトの滞在時間がのびますし、文字だけの記事よりも、圧倒的に充実したコンテンツになります。

加えて、動画は、TVCMのように視覚と聴覚にうったえかけられる媒体なので、購買力アップの効果もあります。これを活用しない手はありませんね！

そこで今回の記事では、YouTube動画の基本的な投稿方法と、意外と設定方法が面倒な、レスポンシブの設定が簡単にできる方法についてお伝えしていきます。

※ WordPressに動画を埋め込むための準備

「 TinyMCE Advancedをインストール」

ワードプレスはデフォルトの場合

・表の作成
・YouTube動画コードの埋め込み
・画像まわりの余白の挿入

などができません。
デフォルトだとツールに表示がなく、上記の部分を挿入したい場合、HTMLコードを使ってテキストで入力していく必要があります。

それですとかなり手間がかかりますし、せっかく動画マーケティング、コンテンツマーケティングを始めようと思った初心者の方にはとても大変な作業になります。

そこで必要なのが「 TinyMCE Advanced 」というプラグインです。

こちらのプラグインをインストールすると、YouTubeの動画コードの埋め込みが簡単にできるようになります。
インストール方法は、このページでのちほどお伝えしていきます。

1. 動画のURLを直接入力する方法

第1章では、一番簡単な方法である、動画のURLを記事内に直接入力する方法を説明していきます。
取得方法は2つあるので順番にお伝えいたします。

1-1.公開済みの動画のURLリンクを取得する方法

すでに公開済みのチャンネルでしたら、YouTubeの視聴画面からURLを取得することができます。
手順をお伝えいたします。

① YouTubeの視聴画面にアクセスして、共有というタブをクリックする。

②　埋め込みようのURLが現れるのでコピーする

URLをWordpressの「ビジュアルエディタ」にURLを貼ると動画が表示されます。

↑取得したURLを貼るだけで動画が表示されます。

実際に公開するとこのように表示されます。

 

動画にカーソルを合わせるとYouTubeの再生マークが赤くなるので、クリックしていただくと再生できます。

1-2. クリエーターツールからURLを取得する方法

①まず、YouTubeチャンネルにログインいただき、チャンネルアイコンを選択します。

 

② アイコンを押すと、下の画像のように、編集画面が出てきますので、クリエイターツールを選択してください。

 

③ 次に、動画を選択。

 

④ 編集ボタンを選択しても、下記の編集画面に移動し、URL(リンク)を発行することが出来ます。

最後に、発行されたURLを直接WordPressのビジュアルモードに入力します。

入力するだけで、YouTubeの動画がアップロードされる仕組みになっています。

ちなみに、テキストモードをひらくと、

<p>https://youtu.be/XhLMiU_YsDA</p>

のように、URLを入れるだけで自動的にpタグで囲ってくれる仕様になっています。

わざわざテキストモードで編集しなくとも投稿できるので、WordPress初心者の方には、この方法が一番オススメです。

ちなみにこの時、YouTubeのURL以外のテキストは入れないようにしてください。
例えば、下記の画像のように入れると、反映されなくなります。

1-3.  YouTube Studio からURLを取得する

上記のクリエーターツールはアカウントによってはもう表示できない場合があります。

YouTube Studioという風に表記が変わっている場合があるのでURLの取得方法の手順をお伝えいたします。

① 動画を作成しているアカウントの右上のアイコンにカーソルを合わせると、メニューが出てくる。

② YouTube Studio をクリック。

③ このようなダッシュボードが表示されるので、左側のメニューから動画をクリック。

③　このように動画一覧が表示される

④　各動画にカーソルを合わせると【オプション】という表記が現れるので、そこをクリックする。

⑤ 表示された【共有可能なリンクを取得】をクリック

④【 リンクをクリップボードにコピーしました】と表示されて、Wordpressに貼れるリンクがコピーされました。

⑤ WordPressのビジュアルエディタにコピーしたURLを貼り付けて動画の挿入が完成します。

2. 再生開始の場所を調節する方法

貼り付けるYouTubeの動画の開始場所は調整できます。
手順はこちらです。

① YouTubeの視聴画面で、動画を再生したい時間に合わせて動画を停止しておく。

② そのまま先ほどの【共有】ボタンをクリック

③ 開始位置にチェックを入れると、その時間から開始する動画が作れます。

 

3. youtubeの埋め込み動画のサイズを変更する方法

また、さきほどの方法では、動画のサイズを変更することができません。
もし変更したい場合は、ショートコードを使うとよいでしょう。ピクセル単位で指定します。

この幅を変更することでサイズが変わりますので、横幅を変更したい場合は、width=”幅”の数字を、高さを変更したい場合は、height=”高さ”の数字を変更すると反映されます。

また、ショートコードを使用すると、前後に文字を入れることも可能になります。
実際の画面は下記の画像のような画面になります。

4. 動画のコードを直接埋め込む方法

続いて、第3章では、動画のコードを直接埋め込む方法をお伝えします。

この方法は、第2章よりも少し難易度が上がります。

4-1. コードの取得

まず、掲載したいYouTubeの動画をひらき、共有ボタンを選択します。

続いて、共有ボタンを選択すると、下記のような画面が出てくるので、埋め込むを選択。

※この方法で発行されるURLは、第1章でお伝えした編集画面から発行されるURLと同じものになりますので、WordPressに直接貼り付けることが可能です。

埋め込むを選択すると、このような画面に移動します。

これは、iframe^※(1)で囲われたコードになります。

コードの中に、width=”560″ height=”315″と書かれているように、デフォルトで横幅が560pixel、縦幅が315pixelに指定されています。

縦横幅を指定したい場合は、このコードをコピーします。

4-2. 埋め込み方法

3-1でコードを取得したら、WordPressの画面をひらき、メディアを挿入/編集を選択します。

続いて、埋め込むタブを選択し、先ほどのコードを入力し、OKボタンを押します。

4-3. 埋め込みサイズの変更

動画のサイズを「もう少し大きくしたい、逆に小さくしたい」というような場合があるかと思います。

WordPressでは、サイズも簡単にカスタマイズすることができます。

3-2のコードを埋め込むまでの作業までは同じで、その後、一般タブをひらきます。

サイズの変更をするのは、上の画像の赤枠で囲んだ箇所になります。

ここで注意していただきたいのが、縦横比を保存という項目にチェックが入っていることを確認してください。

この縦横比を固定することで、サイズを変更しても比率を保ってくれるので、被写体が細くなったり太くなったりすることがありません。

チェックが入っていることを確認したら、横幅・縦幅どちらか一方を変更します。

片方を変更すると、縦横比に合わせてサイズが自動的に変更されます。

4-4. その他の設定

埋め込み形式の場合、タイトルの表示設定や関連動画などを詳細に設定することができます。

この5項目の設定が可能です。
（2018年4月時点の情報。11月時点では、1.開始位置、3.プレーヤーのコントロールを表示する、5.プライバシー強化モードを有効にするは有効。また変更あった場合に追記します）

4-4-1. 開始位置の変更

例えば、セミナーや解説動画などを各キャプチャごとに紹介したい場合、この機能はとても便利です。

動画の開始位置を設定することができるので、各キャプチャのはじまる時間に設定して動画を埋め込めば、巻き戻しや早送りをしなくとも、観たい箇所から視聴することが可能です。

手順としては、この3つになります。上の画像をご覧いただきながらご確認ください。

今回は、50秒からはじまる設定にしました。

再生ボタンを押すと、ちょうど50秒から再生されているのが確認できますね。

4-4-2. 関連動画

次に、動画が終わったら関連動画を表示するの設定にうつります。

※2018年11月時点では仕様が変わったためこの項目はなくなりましたが、また追加された時のために手順を公開しておきます。

関連動画とは、その動画と似たテーマの、他チャンネルの動画のことをさします。

ここにチェックを入れると、再生が終了と同時に他チャンネルの動画が表示されます。

こちら側では操作ができず、ランダムに動画が選択されるので、企業イメージを懸念される方は、チェックを外した方が安全でしょう。

4-4-3. プレーヤーのコントロールを表示する

この項目については、下の画像をご確認ください。

チェックボックスが入った状態だと、プレイヤーは早送り・巻き戻し・ボリュームなどの操作ができます。

デフォルトではチェックが入った状態になります。

4-4-4. 動画のタイトルとプレーヤーの操作を表示する

※こちらも、2018年11月時点では仕様が変わったためこの項目はなくなりましたが、また追加された時のために手順を公開しておきます。

こちらの箇所は、下画像のとおり、タイトルや共有ボタンの操作有無の設定項目になります。

何か特別な理由がない限りは、設定しておきましょう。

5. 再生リストの埋め込み方法

3章からは、少し上級者向けの埋め込み方法についてお伝えしていきます。

YouTubeには、再生リストという機能があります。

これは、アップロードした複数の動画をひとつのURLにまとめる機能で、テーマごとにまとめたい場合に便利です。

再生リストのURLは、https://www.youtube.com/playlist?list=◯◯◯と表示されます。

まず、動画の管理を選択し、再生リストをひらきます。
再生リストの一覧が出てくるので、該当の動画を選択します。

該当の再生リストのページのURLを選択。

このURLをWordPressのビジュアルモードで貼り付けると、動画が自動的に埋め込まれます。

1本目の動画の再生が終了すると、自動的に2本目、3本目…と再生される仕組みになっています。

6. 動画をレスポンシブで公開する方法

続いて、動画をレスポンシブ^※(3)で見せる方法をお伝えしていきます。

少し上級者向けの設定ですが、この設定をすることで、動画のクリック率もあがり、SEO対策にもなります。

6-1. レスポンシブとは？

WordPressの方でレスポンシブの設定をするだけで、縦横比はそのままに、ユーザーのデバイスにサイズを合わせてくれます。

6-2. レスポンシブとそうでないケースの表示の違い

では、実際に、画面上ではどのように見えるのでしょうか？

スマートフォンなどで視聴する場合、画面にきちんとおさまった状態で表示されている動画と、途中で切れてしまっている動画がありますね。

＜レスポンシブでない場合＞

スマートフォンで見た場合、このように、動画の画面が途中で切れてしまっているのがわかりますね。

 

＜レスポンシブ対応している場合＞

対応している場合、スマートフォンの画面いっぱいに動画がおさまっているのがわかります。

近年ではスマートフォンでWebを見るユーザーが大多数を占めるため、レスポンシブ対応は必須です。

見やすさはもちろんのこと、例えばお申し込みフォームなども入力しやすくなりますし、コンバージョン率アップが見込めるでしょう。

6-3. 簡単にレスポンシブ表示できるプラグイン

このように便利な機能を、「ぜひうちのサイトにも使用したい！」と思われた方は多くいらっしゃるのではないでしょうか？

実はこのレスポンシブ表示させる方法、インターネット上でも検索するといくつか上がってくるのですが、どれも、「HTMLのソースを変更しなければならない」しかも、「CSSをいじらないといけない」など、高度なものばかり……。

CSSを書き換える方法もありますが、一歩ソースを間違えるだけでデザインが崩れてしまうこともあるため、なるべくなら、CSSを使用しない簡単な方法を取りたいところです。

そこで、この記事でご紹介するのが、YouTubeをWordPressに入れた時に、自動でレスポンシブにしてくれるプラグイン。

このプラグインを使用することで、YouTube動画が簡単にレスポンシブで表示されます。

6-3-1. プラグインのダウンロード・設定方法

それでは、ダウンロードと設定方法をお伝えしていきます。

 

 

 

 

 

 

 

7. YouTubeのプライバシー強化モードとは？

YouTubeに新しくできた機能で、動画をYouTubeからログアウトした状態で見られる機能です。
チェックすると、ユーザーが再生するまでYouTubeに情報が保存されない設定に変更されます。

つまり、ユーザーのデバイスに、再生履歴などが記録されない、という設定になります。
特に理由がなければ、このチェックは外したままで問題ありません。

プライバシーというのは、クッキー^※(2)のことをさします。

設定方法を詳しく解説します。

① 動画の下にあるの共有の部分をクリックして埋め込みコードを取得する。

② 【埋め込む】をクリック

③　少し下にスクロールして表示される【プライバシー強化モードを有効にする】という項目にチェックを入れる。

④ 上にスクロールして戻ってコードをコピーしてWordPressに貼り付ける。

8. TinyMCE Advancedのインストール方法

YouTubeの動画コードの埋め込みが簡単にできるようになるプラグイン、TinyMCE Advancedのインストール方法をお伝えいたします。

① プラグインの新規追加をクリック

② プラグインの検索窓に「TinyMCE Advanced 」と入力して、表示されたTinyMCE Advanced をインストールする。

「 TinyMCE Advanced 」設定方法はまた別のページでご紹介していきます。

9. まとめ

いかがでしたでしょうか？

WordPressにYouTubeの動画を簡単に表示させる方法は、主にこの2つでしたね。

1.動画のURLを直接入力する方法
2.動画のコードを直接埋め込む方法

このふたつの違いは、サイズの変更の可否でした。

動画のサイズを小さく見せたい場合は、2番目の方法がよいでしょう。

特にサイズの変更を希望しない場合は、1番目の方法がおすすめです。

記事の後半では、さらに応用編として、より記事コンテンツを充実させるために便利な

3.再生リストの埋め込み方法
4.レスポンシブで公開する方法

をお伝えしましたね。

冒頭でもご説明しましたが、動画は、視覚・聴覚にうったえかけられる媒体なので、よりあなたのコンテンツの魅力発信を手伝ってくれます。

ぜひこの4つの方法をマスターして、発信力を加速させましょう。