前回、動画ファイル (mp4) の YouTube へのアップロードと、タイトルなどの動画情報の設定を行い、公開する手順を紹介しました。
前回の記事:Youtube に mp4 動画をアップロードして公開する手順 | Compota-Soft-Press
![Youtube 動画の公開設定を選択し、公開ボタンを押します.](https://compota-soft.work/wp1/wp-content/uploads/2023/03/Youtube-動画の公開設定を選択し、公開ボタンを押します..png)
今回は、Youtube に公開している動画を WordPress のページに表示させる手順を紹介します。
※Wordpress 6.1.1、PHP 7.4.33、chrome 110.0.5481.105 です。
Youtube 埋め込み用のコードの取得
WordPress で Youtube 動画を表示するために、Youtube の表示したい動画のページで、埋め込み用のコードを取得します。
このコードを WordPress の記事に追加したカスタム HTML に貼り付けることで、Youtube 動画を記事の中に埋め込んで表示することができます。
Youtube のその動画のページで、共有ボタンを押します。
表示されたダイアログの「埋め込む」ボタンを押します。
![Youtube 動画ページの共有ボタンを押し、埋め込むを選択します.](https://compota-soft.work/wp1/wp-content/uploads/2023/03/Youtube-動画ページの共有ボタンを押し、埋め込むを選択します.-1024x761.png)
「動画の埋め込み」ダイアログが表示されるので、右下のコピーを押して、HTML コードをコピーします。
開始位置などを設定したい場合は、そちらを選択した後で、HTML コードをコピーしてください。
![Youtube 埋め込むを選んだあと表示された HTML コードをコピーします.](https://compota-soft.work/wp1/wp-content/uploads/2023/03/Youtube-埋め込むを選んだあと表示された-HTML-コードをコピーします..png)
WordPress の記事にカスタム HTML ブロックを追加
Youtube でコピーした埋め込み用のコードを貼り付けるカスタム HTML ブロックを WordPress の記事に追加します。
ブロックのリストからカスタム HTML を選びます。
![WordPress ブロックを選択するリストからカスタムHTMLを選択します.](https://compota-soft.work/wp1/wp-content/uploads/2023/03/WordPress-ブロックを選択するリストからカスタムHTMLを選択します..png)
ブロックエディタで編集中の記事に追加されたカスタム HTML ブロックの中に、 Youtube の動画ページでコピーした埋め込み用の HTML コードを貼り付けます。
![WordPress カスタムHTMLブロックのプレビューを押すと、Youtube 動画の画面が表示されました.](https://compota-soft.work/wp1/wp-content/uploads/2023/03/Youtube-でコピーした埋め込み用コードを-WordPress-のカスタム-HTML-ブロックに貼り付けます..png)
HTML の隣にあるプレビューを選択すると、ブロックエディタ上で Youtube の動画再生画面のプレビューが表示されました。
クリックすると再生することもできます。
![](https://compota-soft.work/wp1/wp-content/uploads/2023/03/WordPress-カスタムHTMLブロックのプレビューを押すと、Youtube-動画の画面が表示されました..png)
まとめ
今回は、WordPress の記事の中に、 Youtube 動画を埋め込んで表示し、再生する手順を紹介しました。
カスタム HTML ブロックを使うことで、様々な他のサービスの機能を WordPress の記事の中に追加することができます。
その活用方法はたくさんあるので、必要に応じて学び紹介します。
参照サイト Thank You!
- YouTube
- ブログから大規模サイトまで作れる CMS | WordPress.org 日本語
- WordPressに動画・YouTubeを埋め込む方法を解説!おすすめプラグインも紹介 | 初心者のためのブログ始め方講座
記事一覧 → Compota-Soft-Press
コメント