2019年現在の最適解！WordPressにYoutube動画を埋め込む方法

WordPressにYoutube動画を埋め込む方法です。

とっても簡単です。

一番いい方法はこれ！

スマホだろうとPCだろうとタブレットだろうと、どんなデバイス、ブラウザサイズでもレスポンシブで伸び縮みしてちょうどいいサイズで表示する方法

①まずYoutubeの埋め込みコードを取得

Youtubeの該当動画の「共有」からコードを取得します。

そして、次にこれ

で、これ！

②WordPressの投稿画面「テキストエディタ」に埋め込む

ワードプレスのエディタを「テキスト」に変更してください。

で、Youtubeから取得した埋め込みコードをペースト

こんな感じのコード

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

これだけだとレスポンシブしないので、 CSSを効かせてあげる。

HTMLはコレ（テキストエディタにペースト）

<div class="yt">
<iframe width="560" height="315" src="https://www.youtube.com/embed/s582L3gujnw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

CSSはこれ

.yt{
  position:relative;
  width:100%;
  padding-top:56.25%;
}
.yt iframe{
  position:absolute;
  top:0;
  right:0;
  width:100%;
  height:100%;
}

親要素に対してピッタリ100%で表示されます。横幅だけじゃなく横幅が小さくなるとそれに合わせて縦幅も小さくなります。

その他の埋め込み方法

①豪快にYoutubeのURLを放り込む（非推奨）

Youtubeの該当動画のアドレスバーに表示されているURLを豪快に埋め込む方法です。

とりあえずこれでも表示はされます。

しかし、リサイズができません、、、　飛び出てますね、、、

 ②ちゃんと埋め込みコードを取得して埋め込む（多少推奨）

Youtubeの該当動画の「共有」をクリックします。

「埋め込む」というところをクリック

そうすると、埋め込みコードが取得できます。

この文字列をコピーし、WordPressに戻ります。

WordPressの投稿画面のエディタを「テキスト」に切り替えます。

そして、先ほどYoutubeの画面から取得した埋め込みコードをペーストします。

それがこれ↓

③「メディアを追加」から埋め込む（非推奨）

 

②立ち上がった画面の「URLから挿入」をクリック

③Youtubeの埋め込みたい動画のページからURLをゲット

Youtubeの動画の下にある「共有」をクリック

URLを取得

※上にある「埋め込む」から取得するiframeで表示する方法もありますが、ここではひとまず簡単な方法で行きます。

上記赤枠のURLをコピー（これをワードプレスにペーストします。）

④WordPressの画面に戻って、URLをペースト

上記②のURLから挿入をクリックした後の画面のhttp;//　とかいてある枠に上記③でコピーしたURLをペーストします。

ペーストする際に最初から入っているhttp://をそのままにしてその後ろにペーストするとおかしなことになるので、これは「http://」は消してからペーストしてください。

するとこんな感じになります。

⑤「投稿に挿入」をクリック

するとこんな感じ！入りましたね

こうなります…

URLを豪快に放り込んだ時と同じです、、、リサイズできません。

テーマによっては大きすぎて飛び出てる人も多いんじゃないでしょうか？

そんなこんなで、一番最初に説明した、レスポンシブでのYoutubeの埋め込みを推奨します。