WordPressサイトにYouTube動画を埋め込む方法

YouTubeチャンネルで情報発信を始めると自社サイトに下記のような動画プレイヤーを表示させたい方は多いのではないでしょうか？

弊社もYouTubeチャンネルを運営していますが、自社サイトに関連する動画は埋め込むようにしています。当記事では、このようなYouTube動画の埋め込み方法を解説しますので、ぜひ参考にしてみてください。

WordPressサイトにYouTube動画を埋め込む方法

YouTube動画をサイト上に埋め込むためには、プレイヤーをサイト上に表示するために必要なHTMLコードを取得して貼り付ける必要があります。まずはこの埋め込みコードを取得しましょう。

Gutenbergエディタをお使いの方はYouTube動画のURLだけでも埋め込むことが可能です。とにかく簡単にYouTube動画を埋め込みたい方はこちらをご覧ください。

YouTubeで埋め込みコードを取得する

まずは埋め込みたいYouTube動画のページにアクセスして、動画下の「共有」をクリックしてください。

共有をクリックした後は「埋め込む」をクリックしてください。

動画の埋め込みコードが表示されますので、右下の「コピー」をクリックしてコードを取得しましょう。

また、取得する際にサイト上で表示する動画プレイヤーをカスタマイズすることができますので、何か変更したいものがあれば下記を参考に設定しましょう。

YouTubeの埋め込みオプションを設定する

埋め込みコード取得時点では下記のように3つの項目を編集することが可能です。基本的にはデフォルトの状態でも構いませんので、必要に応じて使い分けるようにしましょう。

開始位置を決める
開始位置にチェックを入れて任意の時間を入力することで、指定した時間から再生できます。

プレーヤーのコントロール バーを表示する。
動画の下側に表示されるコントロールバーを表示するか否かを決めれます。

プライバシー強化モードを有効にする。
チェックを入れるとユーザーがサイト上で動画を再生するまで再生履歴に残らないようになります。

WordPressサイトにYouTube動画を貼り付ける

YouTube動画の埋め込みコードをコピーできたら、後は表示したいサイトのHTML上に貼り付けるだけになります。今回はWordPressをお使いの方向けに下記の3つの方法を紹介しますので、参考にしてください。

• 旧エディターで埋め込む方法
• Gutenbergで埋め込みコードを貼り付ける方法
• GutenbergでURLだけで埋め込む方法

旧エディタで埋め込みコードを貼り付ける

旧エディターの場合はテキストエディタを選択し、下記のように埋め込みコードをペーストしましょう。

TCDテーマをご利用の場合はクイックタグでYouTube動画をレスポンシブ対応させることが可能です。詳しくは下記をご覧ください。

Gutenbergで埋め込みコードを貼り付ける

Gutenbergエディタを使用されている方はカスタムHTMLブロックを追加して、こちらにコピーした埋め込みコードを入力してください。

TCDテーマをご利用の場合は、埋め込みコードを<div class=”ytube”></div>で囲むことで、レスポンシブ対応させることが可能です。

YouTube動画のURLだけで埋め込む方法

GtenbergのYouTubeブロックを使用すれば、下記のようにYouTube動画のURLを記入するだけで、動画プレイヤーをサイト上に表示させることが可能です。

TCDテーマをご利用の場合は、YouTubeブロックの高度な設定内にある追加CSSに「ytube」と入力することで、レスポンシブ対応させることが可能です。

ページが重くなった！そんな時の対処法

記事の中でYouTube動画をたくさん埋め込むと、読み込みに時間がかかり、表示速度が遅くなることがあります。そんな時には対処する方法は下記にまとめてありますので、こちらもあわせてご参考ください。

YouTubeを自社サイトでも活用しよう

WordPressでYouTube動画を埋め込む方法について解説しました。埋め込んだYouTube動画に用意されたパラメータを入力することで、自動再生や繰り返し再生などのカスタマイズが可能となります。そのため、埋め込みコードを取得して表示する方法も覚えておけば柔軟に対応できることでしょう。また、YouTubeの企業アカウントを育てるための基本的な施策を下記にまとめてますので、ぜひこちらもご覧ください。