WordPressの記事にYouTube動画を埋め込む方法

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

WordPress では YouTube 上の動画を記事に簡単に埋め込むことができる。この方法を知っておくと、ユーザーが動画にアクセスしたい時にすぐに閲覧することができるので、離脱を防ぐことにつながる。

ここでは、YouTube を記事に埋め込む方法をご紹介する。

注:動画を埋め込む前にやっておくべき設定
YouTube の動画を埋め込みを始める前に TinyMCE Advanced の設定を完了していることが必須だ。

1.動画のコードを取得する画面にアクセスする

YouTube にアクセスして、サイトに掲載したい動画のページを表示しよう。

次に図の赤枠箇所のタブを「共有 → 埋め込みコード」の順にクリックする。

すると下図の画面が表示されるので「もっと見る」をクリックするとコードの設定画面にアクセスする。

2.動画のコードを取得する

これが YouTube の埋め込みコードを取得する画面だ。

動画の表示内容など上図の赤枠内でカスタマイズできるので詳しく解説しよう。

2−1.動画のサイズ設定

ここでは動画サイズを指定することができる。

YouTube の埋め込みコードでは、動画のサイズが下表の2種類、それぞれ4パターンから指定できる。

ワイドスクリーンサイズ(16:9)の場合 以前のテレビサイズ(4:3)の場合
560×315 420×315
640×360 480×360
853×480 640×480
1280×720 960×720

数値はすべてピクセルとなる。サイズ指定をしたい場合は、「カスタム サイズ」を選択すると自由に設定できる。記事に動画コードを埋め込んだ後でもカーソルで簡単に調整することもできる。

※ カスタムサイズは、横幅サイズだけを入力して縦幅サイズのボックスに移動すると、縦幅サイズが自動的に表示される。

2−2.その他の設定

ここでは動画の再生終了後の設定、プレーヤーの表示設定ができる。

チェック項目については下表にまとめたので設定する際に参考にしよう。

チェック項目名 内容
動画が終わったら関連動画を表示する 動画の再生が終了した後に関連動画のリンクを表示する場合にチェックを入れる。関連した動画をユーザーに見せることで、そのコンテンツのテーマに興味をもってもらうならチェックを入れてよいだろう。ただし、企業として表示したくない動画もあると思うので、その場合はチェックを外そう。
プレーヤーのコントロールを表示する コントロールの表示場所は下図を確認しよう。早送り・巻き戻し・ボリュームなどの操作パネルの表示・非表示が設定できる。
動画のタイトルとプレーヤーの操作を表示する タイトルの表示場所は下図を確認しよう。タイトルと共有ボタンの表示・非表示が設定できる。よっぽどの理由がない限り表示しておこう。
プライバシー強化モードを有効にする クッキーを制御するときにチェックを入れる。「クッキー」とは、ユーザーのブラウザに一度訪れた情報を保存してくれる技術的な仕組みだ。YouTube は、品質改善のためにこのクッキーを使用して情報収集をしている。チェックを入れると、ページに埋め込まれた動画をユーザーが再生するまでクッキーは機能しない。特に制御が不要ならチェックを外す。
以前の埋め込みコードを使用する 「<iframe…」から始まるコードにサーバーが対応していない場合に使用する。バズ部でお勧めしているサーバーでは特に問題なく動画が表示されたので、ここでのチェックは外している。

YouTube のプレーヤーの各名称は下図を見てほしい。

設定が完了したら埋め込みコードをコピーしよう。

3.記事に動画コードを埋め込む

先ほど取得したコードを埋め込もう。ここでは HTML の知識が全くなくても簡単にコードを埋め込む方法をご紹介する。

まずWordPress 管理画面にログインして、左メニューの「投稿」をクリックして投稿画面にアクセスする。そして、図のように動画を埋め込む箇所をクリックする。

次にビジュアルエディタのメニューから「挿入 → 動画を挿入」とクリックしよう。

すると「動画を挿入/編集」画面がポップアップで表示される。図の通り「埋め込む」タブをクリックしよう。

入力ボックスに先ほどコピーしたコードを貼り付けて「OK」をクリックしよう。

これで動画の埋め込みは完了だ。編集画面では次のように表示されるので、画面サイズをここで調整するなら四隅の□をドラッグしたまま移動させよう。

実際にブラウザで問題なく動画が表示・再生できるか、動画サイズはちょうど良いかを確認しよう。

以上が YouTube の動画を埋め込む方法だ。

4.その他のYouTube動画を埋め込む方法

先に解説した動画の埋め込み方法が一番ベストな設定手順なのだが、この他にも簡単に動画を埋め込む次の方法がある。

  • 動画をツールで埋め込む方法
  • 動画ページのURL を直接貼り付ける方法

しかし、「1.YouTube からコードを取得する」で解説した動画表示のカスタマイズができないこと、また動画の縦横サイズの指定に手間がかかるというデメリットがある。

なのでここは読み飛ばしてもかまわない。興味がある方だけ目を通しておこう。

4−1.動画をツールで埋め込む方法

冒頭で紹介した「TinyMCE Advanced」というプラグインを使って動画を埋め込む方法を紹介する。

最初にYouTube にアクセスして、掲載したい動画のページを開く。そして、ブラウザに表示される動画の URL をコピーする。

※ 動画の画面上で右クリックして「動画の URL を取得(またはコピー)」でも可能

管理画面の左メニューの「投稿」より記事にアクセスする。そして、記事中の動画を埋め込みたい箇所をクリックしたら、下図のようにメニューを「挿入 → 動画を挿入」の順にクリックする。

すると「動画を挿入/編集」画面がポップアップで表示されるので設定しよう。

「ソース」には、コピーした動画の URL を貼り付ける。

「サイズ」は、縦幅サイズと横幅サイズの両方を順に入力する必要がある。そのため、事前に動画の縦横サイズを調べなくてはいけない。

ここで残念なのが「代替ソース」と「ポスター」は機能していないため、空白のままにしておこう。今後、プラグインの新バージョンで改善される事を期待したい。

また、「縦横比を保存」にチェックを入れておくと、サイズの縦横比を保った状態にしてくれる。これは最初の設定時には機能しないが、一度設定して再度サイズを修正する時、片方のサイズを変更するもう一方のサイズが自動で表示されるようになる。

入力が完了したら、「OK」をクリックしよう。

これで動画の埋め込みは完了なので、実際にブラウザで表示確認をしておこう。 

4−2.動画ページのURL を直接貼り付ける方法

実は YouTube の動画ページのURLを直接貼り付けるだけの埋め込み方法がある。

ただし、このやり方だと動画が記事の横幅いっぱいに表示されてしまう。画質の荒い動画の場合、再生した動画が汚く表示されてしまうデメリットがある。

まず「3−1.動画をツールで埋め込む方法」と同じやり方で動画ページの URL をコピーしよう。 コピーした URL を図のように直接貼り付ける。

しばらくすると、下図のように動画が表示される。これで動画の埋め込みは完了だ。

※ 動画サイズを指定するには、WordPress が提供する「embed」というショートコードを使用する必要がある。詳しくは、 embed の使い方を参考にしよう。
  • このエントリーをはてなブックマークに追加

最高の結果を出すためのサイト制作サービス
『 bazubu-shiki 』

cta_bazubushiki“ bazubu-shiki(バズブシキ)” は、バズ部の運営ノウハウを詰め込んだ、メディアサイトの制作サービスです。

  • ・WEBの専門知識がなくても、ブログ記事の更新が可能
  • ・検索エンジンを徹底的に研究した内部構造なので、SEO対策に最適
  • ・お問い合わせやリードの獲得に繋げる、導線の実装が簡単

デザインの作成、SNSへの連携、サーバー管理などはバズ部が一貫して行いますので、あなたは、安心してコンテンツ作りに集中することができます。
WEBマーケティングで最高の結果を出すために、ぜひ導入してみてください。


" bazubu-shiki " について詳しく見る

最新の記事情報が取得できます

Facebook

「いいね!」ボタンを押すと、最新情報がすぐに確認できるようになります。

Twitter

「フォローする」ボタンを押すと、最新情報がすぐにツイート上で確認できるようになります。

コメントはこちらから

  1. いつも参考にさせていただいております。

    初心者なので、何度も読み返して試行錯誤しております。

    1点質問です。

    自分で撮った動画は、どのように投稿記事に掲載することができるのでしょうか?

    よろしくお願いいたします。

    1. やっとさん、コメントありがとうございます。

      ご自身で撮った動画をYoutubeにアップして、記事に掲載することをお勧めします。
      レンタルサーバーに動画をアップするデメリットとして、理由は次の2点あります。

      ・レンタルサーバー会社からデータ転送量の制限を受け、サーバーが強制停止する可能性がある
      (ブログサイトが1ヶ月数十万以上のアクセスがある場合)

      ・ほとんどのレンタルサーバーでは、動画に関する細かなサポート機能は充実していない
      (YouTubeの方が、簡単な動画ファイルの操作・スマホ対応など配慮されている)