YouTubeの動画を記事に埋め込む

WordPress で作成したブログの記事にはブロックエディタで用意されている「YouTube」ブロックを使うことで YouTube で公開されている動画を簡単に埋め込むことができます。ここではブロックエディタを使って記事に YouTube の動画を埋め込む方法について解説します。

(Last modified: )

YouTubeの動画を埋め込む

ブロックエディタを使って YouTube の動画を記事に埋め込む手順について解説します。例として次のような記事を用意しました。

YouTubeの動画を埋め込む(1)

この記事の最後に YouTube の動画を埋め込みます。画面左上の「+」アイコンをクリックし、ブロックタイプの選択画面で「埋め込み」の中にある「YouTube」ブロックをクリックしてください。

YouTubeの動画を埋め込む(2)

「YouTube」ブロックが追加されます。

YouTubeの動画を埋め込む(3)

記事に埋め込む YouTube の動画の URL を入力します。今回は YouTube で公開されている次の動画を埋め込んでみます。

YouTubeの動画を埋め込む(4)

動画のページのアドレスバーに表示されている URL をコピーしてください。

YouTubeの動画を埋め込む(5)

コピーした URL を「YouTube」ブロックのテキストボックスに入力してください。入力が終わったら「埋め込み」をクリックしてください。

YouTubeの動画を埋め込む(6)

YouTube の動画の埋め込みが完了しました。

YouTubeの動画を埋め込む(7)

記事を公開したあとブログを閲覧してみると、さきほどの記事は次のように表示されます。

YouTubeの動画を埋め込む(8)

なお「YouTube」ブロックを追加したあと、コードエディタに切り替えて確認してみると次のようなコードが入力されています。

<!-- wp:core-embed/youtube {"url":"https://www.youtube.com/watch?v=ibjUpk9Iagk","type":"video", "providerNameSlug":"youtube","align":"center","className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
<figure class="wp-block-embed-youtube aligncenter wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
https://www.youtube.com/watch?v=ibjUpk9Iagk
</div></figure>
<!-- /wp:core-embed/youtube -->

動画の配置方法

記事に埋め込んだ YouTube の動画の配置方法を設定します。「YouTube」ブロックをクリックしツールバーに表示された「配置を変更」アイコンをクリックしてください。

動画の配置方法(1)

配置方法として「左寄せ」「中央揃え」「右寄せ」「幅広」「全幅」の 5 種類が用意されています。

動画の配置方法(2)

デフォルトの配置方法である「中央揃え」を選択した場合は動画が記事の中央に表示されます。

動画の配置方法(3)

動画の配置方法(4)

「左寄せ」の場合は動画が画面左側に表示され動画の反対側に次のブロックが回り込んで表示されます。

動画の配置方法(5)

動画の配置方法(6)

「右寄せ」の場合は動画が画面右側に表示され動画の反対側に次のブロックが回り込んで表示されます。

動画の配置方法(7)

動画の配置方法(8)

「幅広」の場合は動画が画面の幅ギリギリのサイズまで拡大して表示されます。

動画の配置方法(9)

動画の配置方法(10)

「全幅」の場合は動画が画面の幅にぴったり収まるサイズまで拡大して表示されます。

動画の配置方法(11)

動画の配置方法(12)

動画のサイズは配置方法に従って自動的に設定されるようです。

-- --

ブロックエディタを使って記事に YouTube の動画を埋め込む方法について解説しました。

( Written by Tatsuo Ikura )

Profile
profile_img

著者 / TATSUO IKURA

プログラミングや開発環境構築の解説サイトを運営しています。