動画サイト YouTube の動画のページの埋め込みコードを取得して、オープンソースのブログソフトウェア・コンテンツ管理システム (CMS) WordPress で作成するページに、ブロックエディターのウィジェットであるカスタム HTML ブロックを使って、投稿記事に動画を埋め込む手順を紹介します。
※ WordPress バージョン 6.8.1 を使用しています。
※ PHP バージョン 7.4.33 を使用しています。
※ テーマ Cocoon 2.8.5.3 を使用しています。
※ 子テーマ Cocoon Child 1.1.3 を使用しています。
サンプルにする動画と投稿記事
例として、自作のミニゲームを自分でプレイした作者プレイ動画「【ゲームジャム】DengerousCraneGame NuigurumiOrDie 作者プレイ【GodotEngine4】 – YouTube」を以下の投稿記事に埋め込みます。
Youtube の動画の埋め込みコードを取得
埋め込みたい YouTube の動画のページに移動して動画の下側にある「共有」ボタンを押します。
「投稿で共有」ダイアログが表示されるので、「埋め込む」ボタンを押します。
動画の埋め込みの HTML コードが表示されるので、右下の「コピー」ボタンを押してクリップボードにコピーします。
※開始位置にチェックをいれることで、動画を再生する開始位置も指定できます。
WordPress のカスタム HTML ウィジェットで埋め込みコードを使用
次に、YouTube の動画を埋め込みたい WordPress の編集ページを表示して、「カスタム HTML 」ブロックを追加します。
そのブロックを追加するには、編集ページの左上の「＋」ボタンを押した後、表示されるリストの「ブロック」タブの「ウィジェット」セクションの「カスタム HTML 」をクリックします。
追加された「カスタム HTML」ブロックに、「HTML を入力」とプレースホルダーが書かれているテキストボックスに、先ほどコピーした埋め込みコードを Ctrl + V キーなどで貼り付けます。
「HTML」の隣の「プレビュー」を選択すると、HTML の編集から、その結果を表示するプレビューに切り替わります。
公開した投稿記事「Audacity 2 つの音源をつなげて 1 つのmp3ファイルでエクスポート | Compota-Soft-Press」に YouTube の動画が埋め込まれ、再生することもできました。
関連記事
Steam の商品ページのリンクを埋め込む手順は以下の記事を参照してください。
Twitter (現 X ) のツイート（ポスト）のリンクを埋め込む手順は以下の記事を参照してください。
まとめ
今回は、動画サイト YouTube の動画のページの埋め込みコードを取得して、オープンソースのブログソフトウェア・コンテンツ管理システム (CMS) WordPress で作成するページに、ブロックエディターのウィジェットであるカスタム HTML ブロックを使って、投稿記事に動画を埋め込む手順を紹介します。
参照サイト Thank You!
- ブログから大規模サイトまで作れる CMS – WordPress.org 日本語
- YouTube
- 【ゲームジャム】DengerousCraneGame NuigurumiOrDie 作者プレイ【GodotEngine4】 – YouTube
記事一覧 → Compota-Soft-Press
コメント