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

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

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

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

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

 

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

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

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

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

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

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

 

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

 

次に、動画を選択。

 

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

 

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

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

 

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

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

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

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

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

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

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

コードの取得

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

 

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

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

 

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

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

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

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

※(1) iframeとは?

HTML文書の中にもうひとつ別のHTMLを埋め込めるタグのこと。タグを埋め込むことで、別のページを表示させることができる。

埋め込み方法

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

 

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

 

埋め込みサイズの変更

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

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

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

 

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

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

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

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

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

その他の設定

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

この5項目の設定が可能です。

1.開始位置の変更
2.関連動画
3.プレーヤーのコントロールを表示する
4.動画のタイトルとプレーヤーの操作を表示する
5.プライバシー強化モードを有効にする

開始位置の変更

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

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

 

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

1.赤枠のボックスにチェックを入れる

2.右側の赤枠の時間を指定する

3.コピーボタンを選択し、埋め込みコードを貼り付ける

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

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

 

関連動画

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

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

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

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

 

プレーヤーのコントロールを表示する

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

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

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

 

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

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

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

 

プライバシー強化モードを有効にする

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

※(2) クッキーとは?

一度訪れたサイトの情報を、利用者のブラウザに保存する機能のこと。

チェックすると、ユーザーが再生するまでYouTubeに情報が保存されない設定に変更されます。

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

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

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

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

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

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

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

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

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

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

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

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

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

レスポンシブとは?

※(3) レスポンシブとは?

PC、タブレット、スマートフォンなど異なるデバイスでも、ユーザーが使用する画面サイズに合わせてページ・レイアウトを最適化する仕組みのことをさします。

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

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

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

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

<レスポンシブでない場合>

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

 

<レスポンシブ対応している場合>

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

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

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

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

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

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

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

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

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

 

プラグインのダウンロード・設定方法

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

1.まず、ダッシュボードのプラグインを選択

2.プラグイン新規追加ボタンを選択

3.次に、検索窓で今回のプラグイン「YouTube」と検索

4.今すぐインストールを押す

5.プラグインを有効化する

6.ダッシュボードでインストール済みプラグインを選択

7.プラグイン「YouTube」settingsを選択

8.Responsive Video Sizingにチェックを入れ、Responsive for all YouTube videosを選択⇒変更を保存で完了(下記画像をご覧ください)

 

まとめ

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

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

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

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

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

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

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

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

をお伝えしましたね。

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

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

  
  • このエントリーをはてなブックマークに追加

よく読まれている記事