【簡単】WordPressにYouTube動画を埋め込む方法

ダッシュボード・設定

WordPressでYouTubeなどの動画を記事に埋め込む方法は、1つではなく、いくつかやり方があります。ただ作業としては、大まかに２つのことをするだけです。

  1. YouTube動画のURL、またはコードを取得する
  2. エディターに埋め込む、または貼り付ける

この2つの作業で動画を埋め込むことができます。その方法を順番にご紹介しています。

簡単YouTube動画の埋め込み方法

YouTube動画をWordPressに埋め込むまでのやり方は、いくつかあるので、おすすめの方法を最初にご紹介します。

埋め込みコードを取得する

YouTubeの表示している動画上でマウスを右クリックすると、黒いポップアップ画面が表示されるので、「埋め込みコードをコピー」をクリックしてコピーします。

WordPressに埋め込みコードを貼り付ける

投稿画面を開いて、動画を表示したいところにコピーした埋め込みコードを貼り付けます。これで、エディター上に動画が表示されますので埋め込み完了です。

動画のURLを変更したいときは、URLの変更項目を見てください。

因みに埋め込みコード（iframeタグ）は、「YouTube」ブロックに変換されてembedタイプのURLが入力された形になります。

YouTubeのURLの種類と取得方法

ここからは、最初に取り上げた方法も含めて、いくつかあるURLの取得方法と利用方法をご紹介しています。

埋め込みに使用できるURL（またはコード）は、いくつかあり、WordPressの記事でどのURLを使用しても動画は、表示されます。ただURLに「embed」とあるのは埋め込みを意味するので、このURLを利用するのが良いと思います。

また、モバイル（スマホ）表示を考えると、「YouTube」、「埋め込み」ブロックを使用すると基本設定でアスペクト比を保持しますので使い勝手がいいです。

表示動画URL

https://www.youtube.com/watch?v=A3PDXmYoF5U

ブラウザのアドレス欄にあるURLを使用して、記事に動画を表示することができます。

URLの取得方法は、埋め込みたいYouTube動画に移動して、ブラウザに表示されているURLをコピーします。

コピーしたURLをWordPressに埋め込むには、エディターにURLを貼り付ける をご覧ください。

短縮URL

https://youtu.be/A3PDXmYoF5U

短縮URLは、動画上でマウスを右クリックすると黒いポップアップ画面が表示されるので、「動画のURLをコピー」をクリックして取得します。

コピーしたURLをWordPressに埋め込むには、エディターにURLを貼り付ける をご覧ください。

または、動画の下にある「共有」からもURLアドレスを取得できます。

画像に alt 属性が指定されていません。ファイル名: youtube_0.png

「共有」ウインドウに表示されるURLの横にある「コピー」から短縮URLを取得します。

埋め込みURL

https://www.youtube.com/embed/A3PDXmYoF5U

埋め込み用URLを使用するには、YouTube動画固有の値をURLアドレス（www.youtube.com/embed/）の後ろに設定します。

例えば、「www.youtube.com/watch?v=」に後にある値を「www.yotube.com/embed/」のあとして、値を追加します。また、iframeタグの中に「src=”…”」の部分に埋め込み用のURLがあります。

「埋め込みURL」をWordPressに埋め込むには、エディターにURLを貼り付ける または ショートコードを使用 をご覧ください。

埋め込みコード：iframeタグ（インラインフラーム）

<iframe width="1180" height="664" src="https://www.youtube.com/embed/A3PDXmYoF5U" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

iframeタグの取得方法は、動画上でマウスを右クリックすると黒いポップアップ画面が表示されるので、「埋め込みコードをコピー」をクリックしてコピーします。

「埋め込みコード」をWordPressに埋め込むには、エディターにURLを貼り付ける または HTMLタグを入力する をご覧ください。

また、iframeタグを取得するには、動画の下にある「共有」からでもできます。

「共有」をクリックしたあと、次に「共有」ウインドウが表示され「埋め込む」をクリックします。

「動画の埋め込み」が表示されたら「コピー」をクリックします。

ブロックエディターでYouTubeを埋め込む方法

動画を投稿に埋め込む方法もいつかあります。

エディターにURLを貼り付ける

表示したい動画のURLをエディタに入力（貼り付け）すると「YouTube」ブロックに変換されてエディターに埋め込めます。

URLの変更

URLを変更するには、トップツールバーにある「URLを編集」をクリックして変更します。

※「YouTube」「埋め込み」ブロックで設定すると、エディタで動画が表示されます。また、別のブラウザに移動したあと、戻ってエディターの見ると動画が消える現象が発生する場合があります。そのときは、スクロールすると表示されます。

「YouTube」または「埋め込み」ブロックを使用

WordPressのブロック「YouTube」や「埋め込み」を使うことで動画を埋め込むことができます。

動画を追加したいところにカーソルを設定して、トップツールバーのにある「＋」をクリックして開き、「ブロック」タブにある「埋め込み」または「YouTube」をクリックします。

「YouTube」ブロックに取得したURLを入力して、「埋め込み」ボタンをクリックすると埋め込み完了です。

ショートコードを使用

WordPressでは、embedというショートコードがあるので、これを使用して動画を記事に埋め込むことができます。

[embed]ここにURLを入力[/embed]

例えば、下のようにURLを入力します。

[embed]http://www.youtube.com/watch?v=A3PDXmYoF5U[/embed]

また、横幅（width）、高さ（height）の表示サイズを設定できます。

[embed width="123" height="456"]http://www.youtube.com/watch?v=A3PDXmYoF5U[/embed]

ショートコードを使用して動画を記事に埋め込むには、埋め込みたいところに「ショートコード」クリックして追加します。

embedの間にURLを入力します。

また、「カスタムHTML」ブロックでembedショートコードを入力しても動画を表示できます。

HTMLを使用する

iframeタグの埋め込みコードをそのまま使用したいとき、カスタムHTMLを使用します。

「カスタムHTML」ブロックに埋め込みコードをそのまま入力（貼り付け）するとYouTube動画が表示されます。

iframeタグをコピーしてカスタムHTMLで使用する場合、記事で表示されるサイズに気をつける必要があります。widthの値を変更することで横幅のサイズ、heightの値を変更することで高さを表示サイズを変更できます。

スポンサーリンク

コメント

タイトルとURLをコピーしました