Youtube の動画を WordPress の投稿記事に埋め込む手順

動画サイト YouTube の動画のページの埋め込みコードを取得して、オープンソースのブログソフトウェア・コンテンツ管理システム (CMS) WordPress で作成するページに、ブロックエディターのウィジェットであるカスタム HTML ブロックを使って、投稿記事に動画を埋め込む手順を紹介します。

WordPress カスタムHTMLブロックで Youtube 動画を埋め込む手順2

※ WordPress バージョン 6.8.1 を使用しています。
※ PHP バージョン 7.4.33 を使用しています。
※ テーマ Cocoon 2.8.5.3 を使用しています。
※ 子テーマ Cocoon Child 1.1.3 を使用しています。

サンプルにする動画と投稿記事

例として、自作のミニゲームを自分でプレイした作者プレイ動画「【ゲームジャム】DengerousCraneGame NuigurumiOrDie 作者プレイ【GodotEngine4】 – YouTube」を以下の投稿記事に埋め込みます。

Youtube の動画の埋め込みコードを取得

埋め込みたい YouTube の動画のページに移動して動画の下側にある「共有」ボタンを押します。

「投稿で共有」ダイアログが表示されるので、「埋め込む」ボタンを押します。

WordPress カスタムHTMLブロックで Youtube 動画を埋め込む手順1

動画の埋め込みの HTML コードが表示されるので、右下の「コピー」ボタンを押してクリップボードにコピーします。
※開始位置にチェックをいれることで、動画を再生する開始位置も指定できます。

WordPress カスタムHTMLブロックで Youtube 動画を埋め込む手順2

WordPress のカスタム HTML ウィジェットで埋め込みコードを使用

次に、YouTube の動画を埋め込みたい WordPress の編集ページを表示して、「カスタム HTML 」ブロックを追加します。

そのブロックを追加するには、編集ページの左上の「+」ボタンを押した後、表示されるリストの「ブロック」タブの「ウィジェット」セクションの「カスタム HTML 」をクリックします。

WordPress カスタムHTMLブロックで Youtube 動画を埋め込む手順3

追加された「カスタム HTML」ブロックに、「HTML を入力」とプレースホルダーが書かれているテキストボックスに、先ほどコピーした埋め込みコードを Ctrl + V キーなどで貼り付けます。

WordPress カスタムHTMLブロックで Youtube 動画を埋め込む手順4

「HTML」の隣の「プレビュー」を選択すると、HTML の編集から、その結果を表示するプレビューに切り替わります。

WordPress カスタムHTMLブロックで Youtube 動画を埋め込む手順5

公開した投稿記事「Audacity 2 つの音源をつなげて 1 つのmp3ファイルでエクスポート | Compota-Soft-Press」に YouTube動画が埋め込まれ再生することもできました。

WordPress カスタムHTMLブロックで Youtube 動画を埋め込む手順6

関連記事

Steam の商品ページのリンクを埋め込む手順は以下の記事を参照してください。

Twitter (現 X ) のツイート(ポスト)のリンクを埋め込む手順は以下の記事を参照してください。

まとめ

今回は、動画サイト YouTube の動画のページの埋め込みコードを取得して、オープンソースのブログソフトウェア・コンテンツ管理システム (CMS) WordPress で作成するページに、ブロックエディターのウィジェットであるカスタム HTML ブロックを使って、投稿記事に動画を埋め込む手順を紹介します。

参照サイト 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をコピーしました