![ワードプレスでユーチューブ動画を埋め込む方法のタイトル画像](https://d-elephant.com/de_2nd/wp-content/uploads/2023/02/eye_catch_21.jpg)
こんちは、今回の第21回ウェブ講座では、
WordPress+Lightning(テーマ)で固定ページや投稿ページに、YouTube動画を埋め込む方法を解説していきたいと思います。
私はWordPressにテーマLightningを入れてウェブサイトを作って運営していますが、他のテーマの場合も、YouTube動画の埋め込みについては共通していると思いますので、Lightning以外のテーマをWordPressにインストールされている方も、参考にできるのではないかと思います。
YouTube動画の埋め込み方については、2パターンがあります。
(1)YouTube専用の埋め込みブロック
(2)カスタムHTMLブロック
この二つのブロックを使ってYouTubeを埋め込むことができます。
基本的には(1)のYouTube専用の埋め込みブロックで埋め込みます。
それで、もしも、上手く表示されないようでしたら
次の手段として(2)のカスタムHTMLブロックを使って埋め込んでみる
という考え方でよいそうです。
(1)YouTube専用の埋め込みブロック
(2)カスタムHTMLブロック
WordPressでの投稿ページではこのような表示となります。
![投稿ページに追加したYouTube埋め込みブロックとカスタムHTMLブロックのキャプチャ画像](https://d-elephant.com/de_2nd/wp-content/uploads/2023/02/douga_01.jpg)
それでは、各々のブロックでのYouTube動画の埋め込み方を解説していきたいと思います。
尚、この解説のキャプチャ画像は私のデモサイトの一つで実際にYouTube動画を埋め込みながらスクリーンショットした画像です。
⇒ https://d-elephant.com/demo_7th/archives/138
YouTube専用の埋め込みブロックで埋め込む方法
では、投稿ページでYouTube動画を埋め込んでみます。
WordPressのページでブロックを追加するには2つの方法があります。
(固定ページでも投稿ページでも同じです)
①または②の[■+]ボタンをクリックする。
③の[ブロックを選択するには「/」を入力]のスペースに「/」を入れて追加する。
![投稿ページでブロックを追加する方法のキャプチャ画像](https://d-elephant.com/de_2nd/wp-content/uploads/2023/02/douga_02.jpg)
今回は③に「/youtube」と入力してみました。
すると、「YouTube専用の埋め込みブロック」と「埋め込みブロック」が表示されましたので、[YouTube専用の埋め込みブロック]の方をクリックしました。
(※後述しますが「埋め込みブロック」の方でもYouTube動画の埋め込みができました)
![ブロック検索で「YouTube埋め込みブロック」と「埋め込みブロック」が表示されたキャプチャ画像](https://d-elephant.com/de_2nd/wp-content/uploads/2023/02/douga_03.jpg)
[YouTube専用の埋め込みブロック]がページに追加されました。
①のスペースに埋め込みたいYouTube動画のURLをコピー&ペーストします。
![](https://d-elephant.com/de_2nd/wp-content/uploads/2023/02/douga_04-1.jpg)
では、埋め込みたいYouTube動画のURLをコピーします。
Lightningを提供しているベクター社のチャンネルの動画を埋め込みたいと思います。
「Lightning基本設定解説 テーマのインストール」という動画を埋め込んでみることにしました。
その動画のページで[共有]をクリックします。
![YouTube動画の共有ボタンをクリックするキャプチャ画像](https://d-elephant.com/de_2nd/wp-content/uploads/2023/02/douga_05.jpg)
共有用のウィンドウが開きます。
WordPressの「YouTube専用の埋め込みブロック」に埋め込む場合は、表示されたウィンドウの[コピー]をクリックします。
すると、左側の赤い枠で囲んだURLがコピーされます。
![YouTubeの共有用URLが表示されているウィンドウのキャプチャ画像](https://d-elephant.com/de_2nd/wp-content/uploads/2023/02/douga_06.jpg)
①WordPress側の「YouTube専用の埋め込みブロック」へコピーしたURLをペーストします。
②[埋め込み]ボタンをクリックします。
![投稿ページの「YouTube埋め込みブロック」へYuouTube動画の共有URLをペーストするキャプチャ画像](https://d-elephant.com/de_2nd/wp-content/uploads/2023/02/douga_07.jpg)
YouTube動画が埋め込まれました。
![投稿ページにYouTube動画が埋め込まれて表示されたキャプチャ画像](https://d-elephant.com/de_2nd/wp-content/uploads/2023/02/douga_08.jpg)
次に「カスタムHTMLブロック」でYouTube動画を埋め込んでみます。
カスタムHTMLブロックでYouTube動画を埋め込む方法
では、ページに「カスタムHTMLブロック」を追加したいので新しいブロックを追加します。
ブロックを追加するには、
①または②の[■+]ボタンをクリックするか、
③の[ブロックを選択するには「/」を入力]のスペースに「/」を入れて追加するのですが、
今回は①の[■+]ボタンをクリックして追加してみます。
![投稿ページでブロックを追加する方法のキャプチャ画像](https://d-elephant.com/de_2nd/wp-content/uploads/2023/02/douga_09.jpg)
ブロックを選択するサイドバーが開きますのでも、
[カスタムHTMLブロック]が現れるまで下へスクロールします。
(※検索窓へ「カスタムHTML」と入力してもいいです)
![ブロック追加のサイドバーが開いたキャプチャ画像](https://d-elephant.com/de_2nd/wp-content/uploads/2023/02/douga_10.jpg)
①現れた[カスタムHTML]にカーソルを乗せると
②[カスタムHTML]のプレビューウィンドウが開きます。
![カスタムHTMLのプレビューウィンドウが開いたキャプチャ画像](https://d-elephant.com/de_2nd/wp-content/uploads/2023/02/douga_11.jpg)
①の[カスタムHTML]をクリックすると
②ページに[カスタムHTMLブロック]が追加されました。
![投稿ページにカスタムHTMLブロックが追加されたキャプチャ画像](https://d-elephant.com/de_2nd/wp-content/uploads/2023/02/douga_12.jpg)
[カスタムHTMLブロック]のHTML入力スペースへ
YouTube埋め込み用のHTMLを入力します。
![投稿ページへ追加されたカスタムHTMLの拡大キャプチャ画像](https://d-elephant.com/de_2nd/wp-content/uploads/2023/02/douga_13.jpg)
先ほどと同じく、
埋め込みたいYouTube動画のURLをコピーしたいので、
その動画のページで[共有]をクリックします。
![ユーチューブ動画の共有ボタンをクリックするキャプチャ画像](https://d-elephant.com/de_2nd/wp-content/uploads/2023/02/douga_05.jpg)
先ほどは、[コピー]ボタンを押して表示されているURLをコピーしましたが、
[カスタムHTMLブロック]に入力するコードは[< >/埋め込む]をクリックします。
![ユーチューブ動画の共有ウィンドウで埋め込むをクリックするキャプチャ画像](https://d-elephant.com/de_2nd/wp-content/uploads/2023/02/douga_14.jpg)
すると、動画の埋め込みコードが表示されますので、
①の[コピー]ボタンをクリックします。
②の動画の埋め込みコードがコピーされます。
![ユーチューブ動画の共有用埋め込みコードをコピーするキャプチャ画像](https://d-elephant.com/de_2nd/wp-content/uploads/2023/02/douga_15.jpg)
WordPress側の「カスタムHTMLブロック」へ
コピーした動画の埋め込みコードをペーストします。
![ユーチューブ動画の共有埋め込みコードを投稿ページのカスタムHTMLブロックへペーストするキャプチャ画像](https://d-elephant.com/de_2nd/wp-content/uploads/2023/02/douga_16.jpg)
[カスタムHTMLブロック]のツールバーで
①の[プレビュー]をクリックします。
②で埋め込んだコードが動画となって表示されました。
![カスタムHTMLブロックのツールバーでプレビューボタンを押して動画を表示させるキャプチャ画像](https://d-elephant.com/de_2nd/wp-content/uploads/2023/02/douga_17.jpg)
これで[カスタムHTMLブロック]でのYouTube動画埋め込みは完了しました。
本来はこの二つの方法でのYouTube動画埋め込みの解説は終了する予定だったのですが、前述しましたように「YouTube専用の埋め込みブロック」の時に隣の隣に「埋め込みブロック」を目にし、これでもYouTube動画の埋め込みができるのではないかと思ってやってみたところ、YouTube動画を埋め込むことができましたので、「埋め込みブロック」でのYouTube動画の埋め込み方法もご紹介したいと思います。
埋め込みブロックでYouTube動画を埋め込む方法
では、ページに「埋め込みブロック」を追加したいので新しいブロックを追加します。
ブロックを追加するには、
①または②の[■+]ボタンをクリックするか、
③の[ブロックを選択するには「/」を入力]のスペースに「/」を入れて追加するのですが、
今回は①の[■+]ボタンをクリックして追加してみます。
![投稿ページでブロックを追加する方法のキャプチャ画像](https://d-elephant.com/de_2nd/wp-content/uploads/2023/02/douga_18.jpg)
ブロックを選択するサイドバーが開きますのでも、
[埋め込みブロック]が現れるまで下へスクロールします。
①現れた[埋め込み]ボタンにカーソルを乗せると
②[埋め込み]のプレビューウィンドウが開きます。
プレビューウィンドウに
“TwitterやYouTubeなどの他のサイトからコンテンツを取り込んで表示するブロックを追加します。”とあります。
①の[埋め込み]をクリックします。
![ブロック検索サイドバーで埋め込みにカーソルを乗せるとプレビューウィンドウが開いたキャプチャ画像](https://d-elephant.com/de_2nd/wp-content/uploads/2023/02/douga_19.jpg)
ページに[埋め込みブロック]が追加されました。
①のスペースに埋め込みたいYouTube動画のURLをコピー&ペーストします。
![](https://d-elephant.com/de_2nd/wp-content/uploads/2023/02/douga_20.jpg)
では、埋め込みたいYouTube動画のURLをコピーします。
その動画のページで[共有]をクリックします。
![ユーチューブ動画の共有ボタンをクリックするキャプチャ画像](https://d-elephant.com/de_2nd/wp-content/uploads/2023/02/douga_05.jpg)
共有用のウィンドウが開きます。
「YouTube専用の埋め込みブロック」の時と同様に、表示されたウィンドウの[コピー]をクリックします。
すると、左側の赤い枠で囲んだURLがコピーされます。
![ユーチューブ動画の共有URLをコピーするキャプチャ画像](https://d-elephant.com/de_2nd/wp-content/uploads/2023/02/douga_06.jpg)
①WordPress側の「埋め込みブロック」へコピーしたURLをペーストします。
②[埋め込み]ボタンをクリックします。
![投稿ページで埋め込みブロックにユーチューブ動画の共有URLをペーストするキャプチャ画像](https://d-elephant.com/de_2nd/wp-content/uploads/2023/02/douga_21.jpg)
YouTube動画が埋め込まれました。
と同時に自動的にツールバーが
①[埋め込みブロック]から「YouTube専用の埋め込みブロック」へと変更されました。
![](https://d-elephant.com/de_2nd/wp-content/uploads/2023/02/douga_22.jpg)
これで[埋め込みブロック]でのYouTube動画埋め込みは完了しました。
以上の3つの方法でのYouTube動画の埋め込みは、
私のデモサイトの一つで実際にYouTube動画を埋め込んだものです。
⇒ https://d-elephant.com/demo_7th/archives/138
以上で、第21回のウェブ講座、
「WordPressでYouTube動画を埋め込む方法(2パターン)を解説」は終了です。
大変お疲れ様でした。
それでは、次回の第22回ウェブ講座でまたお会いしましょう~^^