WordPress ページに Youtube 動画を埋め込む手順

前回、動画ファイル (mp4) の YouTube へのアップロードと、タイトルなどの動画情報の設定を行い、公開する手順を紹介しました。

前回の記事:Youtube に mp4 動画をアップロードして公開する手順 | Compota-Soft-Press

Youtube 動画の公開設定を選択し、公開ボタンを押します.

今回は、Youtube に公開している動画を WordPress のページに表示させる手順を紹介します。
※Wordpress 6.1.1、PHP 7.4.33、chrome  110.0.5481.105 です。

Youtube 埋め込み用のコードの取得

WordPress で Youtube 動画を表示するために、Youtube の表示したい動画のページで、埋め込み用のコードを取得します。
このコードを WordPress の記事に追加したカスタム HTML に貼り付けることで、Youtube 動画を記事の中に埋め込んで表示することができます。

Youtube のその動画のページで、共有ボタンを押します。
表示されたダイアログの「埋め込む」ボタンを押します。

Youtube 動画ページの共有ボタンを押し、埋め込むを選択します.

「動画の埋め込み」ダイアログが表示されるので、右下のコピーを押して、HTML コードをコピーします。
開始位置などを設定したい場合は、そちらを選択した後で、HTML コードをコピーしてください。

Youtube 埋め込むを選んだあと表示された HTML コードをコピーします.

WordPress の記事にカスタム HTML ブロックを追加

Youtube でコピーした埋め込み用のコードを貼り付けるカスタム HTML ブロックを WordPress の記事に追加します。

ブロックのリストからカスタム HTML を選びます。

WordPress ブロックを選択するリストからカスタムHTMLを選択します.

ブロックエディタで編集中の記事に追加されたカスタム HTML ブロックの中に、 Youtube の動画ページでコピーした埋め込み用の HTML コードを貼り付けます。

WordPress カスタムHTMLブロックのプレビューを押すと、Youtube 動画の画面が表示されました.

HTML の隣にあるプレビューを選択すると、ブロックエディタ上で Youtube の動画再生画面のプレビューが表示されました。
クリックすると再生することもできます。

まとめ

今回は、WordPress の記事の中に、 Youtube 動画を埋め込んで表示し、再生する手順を紹介しました。
カスタム HTML ブロックを使うことで、様々な他のサービスの機能を WordPress の記事の中に追加することができます。
その活用方法はたくさんあるので、必要に応じて学び紹介します。

参照サイト Thank You!

記事一覧 → Compota-Soft-Press

コメント

Ads Blocker Image Powered by Code Help Pro

お願い - Ads Blocker Detected

このサイトは広告を掲載して運営しています。

ポップアップを閉じて閲覧できますが、よろしければ

このサイト内の広告を非表示にする拡張機能をオフにしていただけませんか?

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

We have detected that you are using extensions to block ads. Please support us by disabling these ads blocker.

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