YouTubeの動画を記事に埋め込む
WordPress で作成したブログの記事にはブロックエディタで用意されている「YouTube」ブロックを使うことで YouTube で公開されている動画を簡単に埋め込むことができます。ここではブロックエディタを使って記事に YouTube の動画を埋め込む方法について解説します。
(Last modified: )
YouTubeの動画を埋め込む
ブロックエディタを使って YouTube の動画を記事に埋め込む手順について解説します。例として次のような記事を用意しました。
この記事の最後に YouTube の動画を埋め込みます。画面左上の「＋」アイコンをクリックし、ブロックタイプの選択画面で「埋め込み」の中にある「YouTube」ブロックをクリックしてください。
「YouTube」ブロックが追加されます。
記事に埋め込む YouTube の動画の URL を入力します。今回は YouTube で公開されている次の動画を埋め込んでみます。
動画のページのアドレスバーに表示されている URL をコピーしてください。
コピーした URL を「YouTube」ブロックのテキストボックスに入力してください。入力が終わったら「埋め込み」をクリックしてください。
YouTube の動画の埋め込みが完了しました。
記事を公開したあとブログを閲覧してみると、さきほどの記事は次のように表示されます。
なお「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」ブロックをクリックしツールバーに表示された「配置を変更」アイコンをクリックしてください。
配置方法として「左寄せ」「中央揃え」「右寄せ」「幅広」「全幅」の 5 種類が用意されています。
デフォルトの配置方法である「中央揃え」を選択した場合は動画が記事の中央に表示されます。
「左寄せ」の場合は動画が画面左側に表示され動画の反対側に次のブロックが回り込んで表示されます。
「右寄せ」の場合は動画が画面右側に表示され動画の反対側に次のブロックが回り込んで表示されます。
「幅広」の場合は動画が画面の幅ギリギリのサイズまで拡大して表示されます。
「全幅」の場合は動画が画面の幅にぴったり収まるサイズまで拡大して表示されます。
動画のサイズは配置方法に従って自動的に設定されるようです。
-- --
ブロックエディタを使って記事に YouTube の動画を埋め込む方法について解説しました。
( Written by Tatsuo Ikura )
著者 / TATSUO IKURA
これから IT 関連の知識を学ばれる方を対象に、色々な言語でのプログラミング方法や関連する技術、開発環境構築などに関する解説サイトを運営しています。