簡単3ステップ!WordPressの記事にYouTube動画を埋め込む方法

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



WordPressでブログを書いているんだけど、YouTube動画を簡単に埋め込む簡単な方法はないかしら。

今回は、そんなあなたにぴったりの記事です!

YouTubeの動画は、投稿者が『サイトへの埋め込みを許可』にチェックをしてさえいれば、あなたのブログ記事に埋め込むことができます。

でも、埋め込むまでにはコードを編集して、取得して貼り付けたりと作業が必要になるので、慣れていない人にとってはちょっと難しいかもしれません。

そこで今回は、WordPressの記事にYouTube動画を埋め込む方法を簡単3ステップで紹介していきます。

これから以下の順番で説明していきますよ。

  1. 埋め込みたいYouTube動画の画面を開く
  2. 動画の設定をする
  3. コードをコピーして動画を埋め込む

画像を入れながら解説しているので、WordPressの管理画面を見ながら一緒に進めて行くとわかりやすいかと思います。

1.埋め込みたいYouTube動画の画面を開く。

まずはどのブラウザからでも構いません。パソコンから埋め込みたいYouTube動画の画面を開いてください。

僕は今からこの『YouTube Rewind: The Ultimate 2016 Challenge』という動画を埋め込んでいくので、「今はとりあえずやり方だけ覚えたい」という方は僕と一緒にこの動画を埋め込んでいきましょう。

YouTubeの画面を開く

 

ページを開いたら、動画タイトルのすぐ下にある『埋め込みコード』のタブを選択します。

YouTubeの埋め込みコードをコピーする

もしタブの画面が表示されていない場合は、一度『共有』のボタンをクリックしてみましょう。すると上の画像のような画面が表示されるはずです。

これで埋め込む前の準備ができました。

2.動画の設定をする。

WordPressを埋め込む前の設定画面

ここに表示されているコードをそのまま埋め込めば、とりあえずサイト上に表示させることができるのですが、動画の細かい設定をして埋め込むこともできるんです。

あまり使う頻度は高くないものの、知っておくと何かの機会で役に立つことがあるかもしれないので、そのオプションの設定方法を2つ紹介していきます。

2−1.動画サイズを変更する

まずは動画サイズを変更して埋め込む機能です。

デフォルトで指定されている動画サイズは全部で4種類ですが、カスタムで設定すれば好きなサイズに変更することができます。

YouTubeをサイトに埋め込むことのできる動画サイズの種類

またこのデメリットとして、スマホで表示したときに画面サイズ幅を大きく超えてしまう可能性があります。

iframeタグに対するCSSがしっかり効いていれば、たとえ1200pxで動画を埋め込んでも、320pxのスマホ幅に収まるようになるのですが、WordPressのテーマによってはしっかり設計されていない可能性があります。

そんなときはスマホからWordPressの管理画面にログインして、プレビューでサイト幅が増えていないか確認してみましょう。

もしYouTube動画が大きくはみだしてしまっている場合は、最後に紹介する方法で動画を最適化しましょう。

2−2.動画の詳細な設定

次に、埋め込んだ動画に対して詳細な設定をすることができる機能です。

YouTubeの動画を埋め込む詳細な設定方法

基本的にデフォルトの状態で最適化されているので、「こんな細かい機能使わない、動画が埋め込めればそれでいい!」という方は飛ばしてもらって構いません。

ここではこの4つを設定することができます。

1.動画が終わったら関連動画を表示する
YouTubeを再生し終わったときに「あなたのオススメ動画」として、他の動画が画面に表示されるようになります。サイトの離脱率を下げたい場合はチェックを外しておきましょう。
2.プレイヤーのコントロールを表示する
このチェックを外すと動画の下に表示されるバー(音量調節・動画の長さなど)が表示されなくなり使いにくくなること間違いなしなので、これはチェックを入れたままにしておきましょう。
3.動画のタイトルとプレイヤーの操作を表示する
このチェックを外すと動画の上に表示されているバー(タイトル・SNSのシェア)が表示されなくなります。動画のタイトルがないとユーザーがなんの動画を再生しているのか迷わせてしまうので、これもチェックを入れたまましておきましょう。
4.プライバシー強化モードを設定する
Googleによると『プライバシー強化モードを有効にすると、ウェブサイトの訪問者が動画を再生しない限り、訪問者に関する情報は YouTube に保存されません。』とのことで、特に気にしなくて良い場所なので、デフォルトではチェックが外された状態です。

僕が動画を埋め込むときに使っているのは、1番の『動画が終わったら関連動画を表示する』くらいですね。

このチェックを外すと読者(ユーザー)がまた記事に戻って来てくれますから効果的です。

3.コードをコピーして動画を埋め込む。

動画のオプションを設定し終わったら、下のコードをコピーします。

YouTubeの埋め込みコードをコピーする

 

そしたらWordPressの管理画面に戻っていただいて、『新規作成』から記事の中に貼り付けてください。

プレビューをして、下のようにYouTubeの動画が表示されたら埋め込みが完了しました。

また注意として、YouTubeの動画はサイトに埋め込み過ぎてしまうと読み込み速度が遅くなってしまうことがあります。

パソコンから見るときは気にならないのですが、スマホで見る人からすると「なんだこのサイト、全然読み込まれない!」となってしまい、離脱率の増加につながります。

なので1サイトに埋め込むYouTube動画は多くても10個以内におさめるようにしましょう。

どうしても埋め込まないといけないようなときは、aタグで別リンクで開かせるなどして、サイトの読み込み速度を遅くしないよう工夫しましょう。

P.S.YouTubeの動画がサイトの幅に収まりきらない!

通常のWordPressテーマであれば、動画を埋め込んだ時点でレスポンシブ対応するのですが、ごくたまに対応していないテーマがあります。

そんなときは、埋め込んだ動画にこのようなdivタグを作って囲んでください。

<div class="youtube_div">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.4495704002293!2d139.6973901148701!3d35.69055298019218!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188cd0d6b1ba1f%3A0x1c32a1f1ecacfdd5!2z5paw5a6_6aeF!5e0!3m2!1sja!2sjp!4v1463554214910" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

 

そしたらCSSでレスンポンシブ対応させていきます。以下のコードを追加してください。

.youtube_div{
position: relative;
padding-top: 75%;
height: 0;
overflow: hidden;
}
.g_map iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

これでYouTubeの動画がしっかりとサイト幅におさまるはずです。

以上、WordPerssブログにYouTube動画を埋め込む方法を3ステップで紹介しました。