Tech Bytes

短くて分かりやすい技術情報を記事として共有します。みなさんにとって学びになれば幸いです。

wordpressの記事中にYouTubeを埋め込む方法

埋め込みコードから取得

WordPressの記事にYouTubeを埋め込む方法は比較的簡単です。
以下に手順を示します。

1. YouTubeの埋め込みコードを取得する:

  • YouTubeで埋め込みたい動画を開きます。
  • 動画の下にある「共有」ボタンをクリックします。
  • 「埋め込む」オプションを選択します。
  • 埋め込みコードが表示されるので、そのままコピーします。

2. WordPressにログインする:

  • WordPressの管理画面にログインします。

3. 記事を編集する:

  • 動画を埋め込みたい記事を選択して編集モードに入ります。

4. ビジュアルエディターで埋め込む:

  • ビジュアルエディターを使用している場合は、埋め込みたい場所にカーソルを置きます。

5. YouTube埋め込みコードを貼り付ける:

  • YouTubeの埋め込みコードを貼り付けます。

ビジュアルエディターで直接貼り付けることができます。

6. プレビュー:

  • 記事をプレビューして、埋め込みが正しく表示されていることを確認します。

7. 公開:

  • 埋め込みが正しく表示されることを確認したら、記事を公開または更新します。

これで、WordPressの記事にYouTube動画を埋め込むことができます。

埋め込みコードの例

YouTubeの埋め込みコードは、通常、以下のような形式です。

<iframe width="560" height="315" src="https://www.youtube.com/embed/動画のID" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

このコードの中で、src属性にはYouTube動画のURLが含まれており、allowfullscreen属性は埋め込まれた動画がフルスクリーン表示に切り替えることを許可します。
また、widthとheight属性は埋め込みプレーヤーの幅と高さを設定します。
動画のIDは、YouTubeのURLの中にある一意の識別子です。

例えば、YouTubeの動画URLがhttps://www.youtube.com/watch?v=動画のIDであれば、src属性にはhttps://www.youtube.com/embed/動画のIDが入ります。

実際に記事に埋め込む場合、このコードを記事のHTMLエディターに貼り付けてください。