WordPressにYouTubeの動画を埋め込む方法！5分で完了！

WordPressにYouTubeの動画を埋め込みたい！

WordPressにYouTubeの動画を埋め込みたいけど、やり方がわからず、お悩みの方も多いのではないでしょうか！？

ブログ内で動画を使うことで、あなたのブログがよりわかりやすい内容になります。

テキストよりも動画のほうが多くの情報を伝えることができるので、複雑なことでもよりわかりやすくユーザーに伝えることができます。

そこで、今回はWordPressにYouTubeの動画をカンタンに埋め込む方法を紹介します。

WordPressにYouTubeの動画を埋め込みたいと思っている方は、ぜひ参考にしてみてください。

1 WordPressの記事にYouTubeを埋め込む方法
- 1.1 YouTubeのURLを張り付ける
- 1.2 YouTubeの埋め込みコードを使う（推奨）
2 レスポンシブに対応させよう！
- 2.1 CSSでレスポンシブに対応させる
- 2.2 プラグインを使ってレスポンシブに対応させる
3 リンク切れのチェックをしよう！
- 3.1 Broken Link Checkerがオススメ
4 まとめ

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

YouTubeのURLを張り付ける

WordPressにYouTubeの動画を埋め込む方法で、最もカンタンなのがYouTubeのURLを張り付ける方法です。

とりあえず埋め込めればいいという方は、この方法でYouTubeの動画を埋め込みましょう！

STEP1：埋め込みたい動画のURLをコピー

YouTubeにアクセスをして、埋め込みたい動画のURLをコピーします。

STEP2：WordPressのエディターにURLをペースト

WordPressの投稿画面で、ビジュアルエディタにYouTubeのURLをペーストします。

そうすると自動的にYouTubeの動画が埋め込まれます。

URLのコピペでYouTubeの動画を埋め込むメリット

とにかくカンタンにYouTubeの動画を埋め込むことができます。

動画を埋め込んでみて、特に問題が起きないようでしたらこの方法で動画を埋め込んで問題ありません。

URLのコピペでYouTubeの動画を埋め込むデメリット

表示される動画のサイズ変更ができない
動画再生開始位置を指定することができない
使っているテーマによって、動画のサイズが大きくて飛び出してしまう

うまく動画を表示させることができないという人は、次に紹介するYouTubeの埋め込みコードを使う方法で動画を埋め込みましょう。

YouTubeの埋め込みコードを使う（推奨）

動画のサイズを変更したい場合や、再生開始位置を指定したい場合は、YouTubeの埋め込みコードを使いましょう！

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

YouTubeの埋め込みたい動画にアクセスして、共有をクリックします。

ポップアップウィンドウがでるので、埋め込むをクリックします。

赤枠の中が埋め込みコードになるので、コードをコピーします。

STEP2：コードをテキストエディタにペースト

WordPressの投稿画面で、テキストエディタに動画の埋め込みコードをペーストします。

テキストエディタに埋め込みコードをペーストしたあと、ビジュアルエディタに切り替えれば、埋め込まれた動画を確認することができます。

サイズの変更方法

埋め込みコードのWidth、heightの数字を変こすることで動画のサイズを変更することができます。

Width＝横サイズ（単位ピクセル）
height＝縦サイズ（単位ピクセル）

横サイズだけの変更、縦サイズだけの変更をすると比率が狂ってしまうので注意してください。

１６：９の動画サイズ早見表

横幅	縦幅	備考
480	270
560	315	デフォルトサイズ
600	338
800	450
1080	608
1280	720	720p
1920	1080	1080p

再生開始位置の変更方法

動画の埋め込みコードが表示されているところで、「開始位置」にチェックを入れて、再生させたい開始時間を入力します。

YouTubeの埋め込みコードを使って動画を埋め込むメリット

サイズや開始位置の変更、CSSを使うことによってレスポンシブ対応させることができたりとカスタマイズすることができます。

WordPressにYouTubeの動画を埋め込むときは、この方法がオススメです。

YouTubeの埋め込みコードを使って動画を埋め込むデメリット

ただURLを張り付けるよりも、手間がかかります。

慣れればすぐにできるのですが、やり方を覚えるまでは少し時間が掛かります。

レスポンシブに対応させよう！

レスポンシブとはPC、スマホなど異なるデバイスで見た場合に、ユーザーが使用する画面のサイズに合わせてページの表示してくれるような仕組みです。

レスポンシブにすることで、PCで見たときも、スマホで見たときも動画を適切なサイズで表示させることができます。

CSSでレスポンシブに対応させる

WordpPressのテキストエディタに<div class=”movie-wrap”>埋め込みコード</div>と入力します。

<div class="movie-wrap">

<iframe width="560" height="315" src="https://www.youtube.com/embed/KxMvJEbEyqk?start=90" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

</div>

CSSはこちらになります。

.movie-wrap {
     position: relative;
     padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
     height: 0;
     overflow: hidden;
}

.movie-wrap iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}