ワードプレスにyoutubeを埋め込む4つの方法＆レスポンシブのやり方

「WordPressの記事内にYouTube動画を埋め込みたい！」となったとき、やり方は複数あります。といっても、基本はコピペなので難しいことはありません。

今回は、初心者さんでも簡単にできる4つのやり方を紹介します。

こんた

「スマホ表示だと動画が画面からはみ出す」トラブルへの対処法も紹介するので、ぜひ試してみてください！

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

YouTubeの動画をWordPressに掲載する方法は4つあります。ブロックエディタを使用している場合を想定して、簡単な順に紹介しますね！

1. 動画のURLを貼り付ける
2. YouTube埋め込みブロックを利用する
3. 動画の埋め込みコードを貼り付ける
4. プラグインを使用する

1.動画のURLを貼り付ける

YouTube動画のURLを記事内にコピペするだけの、一番お手軽な方法です。

STEP

挿入したい動画を表示

You Tubeで、挿入したい動画を表示します。

STEP

動画下の「共有」からURLをコピー

動画下の「共有」を押します。
アドレスバーから、対象の動画のURLをコピーしてもOKです。

ポップアップでURLのコピー画面が現れたら、URL横のコピーをクリックします。

クリックすると画面左下に「リンクをクリップボードにコピーしました」と表示されればコピーは完了しています。

そのまま、WordPressの投稿画面に戻りましょう。

STEP

WordPressの記事編集画面で、URLを貼り付け

WordPressの記事編集画面の動画を入れたい場所で、URLをそのままペースト（右クリック+貼り付け）をします。
すると画像のように自動で動画のサムネイルが表示されます。

ブロックの指定は必要ありません。URLをコピペするだけでOKです。

もしテーマやバージョンの関係でうまくサムネイル表示されないようなら、2番目のYou Tube埋め込みブロックを使う方法を試してみてください。
また、この方法だと動画の表示サイズは指定できません。
表示サイズを調整したい場合は、3番目の方法で挿入してください。

2.YouTube埋め込みブロックを利用する

WordPressのYouTube埋め込みブロックを使う方法です。

STEP

記事編集画面から、YouTube埋め込みブロックを指定

記事編集画面から、YouTube埋め込みブロックを指定する。

STEP

URLを入力して「埋め込み」をクリック。

表示された欄の「埋め込むURLをここに入力･･･」というところに、URLをペーストして「埋め込み」をクリックします。

STEP

動画のサムネイルが表示される。

自動で再読み込みされて、対象の動画のサムネイルが表示されれば完了です。

この方法も動画サイズは指定できません。

3.動画の埋め込みコードを貼り付ける

表示サイズや再生スタート時間を指定したい場合は、この方法を使います。

STEP

動画の埋め込みコードをコピー

YouTube動画の「共有＞埋め込む」から動画の埋め込みコードをコピーします。

「共有」をクリックすると、このポップアップが表示されるので、「埋め込む」をクリックします。

STEP

動画の再生開始時間を指定

動画の再生開始時間を指定したい場合は、「開始位置」をチェックして時間を指定する。

指定ができたら右下の「コピー」をクリックして、埋め込みコードをコピーします。

STEP

WordPressの編集画面からカスタムHTMLを指定

WordPressの編集画面からカスタムHTMLを指定していきます。

STEP

動画の埋め込みコードをペースト

動画の埋め込みコードをペーストします。

表示サイズを変更したい場合は「iframe width=”560″ height=”315″」とある部分を好きなサイズに指定する。

4.プラグインを使用する

ただ動画を埋め込むだけなら、1〜3の方法が簡単です。
でも「動画挿入でページの表示速度が遅くなるのは避けたい」という方は、動画の遅延読み込みができるプラグイン『WP YouTube Lyte』の利用をおすすめします。

遅延読み込みとは、ユーザーがスクロールして動画部分を表示したタイミングで動画を読み込むこと。ページ表示速度が早くなるのでユーザーフレンドリーだし、SEOにもよい影響があります。

記事の表示速度が心配な方は、ぜひ試してみてください。

埋め込んだYouTube動画をレスポンシブ対応にする方法

PC画面だと問題なく表示されるのに、スマホ画面だと動画がはみ出したり、縦横比が変になるケースもあります。

これは、埋め込んだ動画がレスポンシブ対応されていないから起きるトラブル。YouTubeのブログパーツがあるテーマなら自動でレスポンシブ対応するものがほとんどですが、海外のテーマは対応しないテーマも多いです。

使用しているテーマの問題なので、CSSの追加とHTMLの編集が必要。

手順は次の2ステップです。

1. CSSを追加する
2. HTMLタグを追加する

CSSの追加は1回でOK。HTMLタグの追加は動画を挿入するたびに必要です。

1.CSSを追加する

次の方法でCSSを追加します。

1. WordPressの管理画面に入る。
2. 「外観＞カスタマイズ＞追加CSS」を開く。
3. 下記のコードをコピペして「公開」を押す。

なお「padding-bottom: 56.25%;」はアスペクト比16:9のときの指定です。
4:3がよい場合は「padding-bottom: 75%;」にしてください。

/*youtube埋め込み*/
.video {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
  margin-bottom: 50px;
}
.video iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
/*youtube埋め込み終了*/ 

 2.HTMLタグを追加する

1. WordPressの編集画面からカスタムHTMLを追加。
2. 以下のようにHTMLを記述する（動画URL以外はコピペでOK）。

<div class="video">
<iframe width="560" height="315" src="動画URL" frameborder="0" allowfullscreen></iframe>
</div>

iframeタグを、CSSで追加したdivタグで囲みます。ここを間違えるとエラーになるので、CSSとdivタグはちゃんと合わせてくださいね。

HTMLタグの追加は動画挿入のたびに必要です。よく動画を挿入するって人はショートコードを作ると時短になると思います。 
自分でCSSCSSやHTMLを記入するのが不安な方や、ショートコードを作成したい方は、『ホームページ保健室』をご利用ください。一瞬で解決します。

あわせて読みたい

ホームページ保健室 【】 「ひとりで何日も悩んでいたことが、一瞬で解決した」 法人～個人まで2,500サイトを制作・運用してきた技術の専門家に、技術的なことから運用方法まで、なんでも相…

おまけ

YouTubeのサムネイルをアイキャッチに設定する方法

YouTubeのサムネイルを、ページのアイキャッチに設定したい場合もありますよね。

YouTubeのスクショをサムネイルに設定するのもいいけれど、一発で簡単にできるプラグインがあります！

おすすめのプラグインは『Featured Video Plus』。

このプラグインを入れると、投稿ページからYouTubeのURLを指定するだけで動画のサムネイルをアイキャッチに設定できるようになります。

覚えてしまえば動画の埋め込みは簡単！

動画の埋め込みというと難しく感じるけれど、覚えてしまえば簡単です！
基本はYouTubeのURLをコピペするだけでよいので、画像の挿入より簡単かも。

テーマによってはCSSの追加が必要だけど、これも慣れれば手間ではないかな、と思います。

記事内に動画があると、より詳しく情報を届けられたり、ユーザーの滞在時間が伸ばせたりとメリットも大きいですよね。
ぜひチャレンジしてみてください！