YouTubeの動画を自分のサイトやブログに埋め込みたいのに、やり方がわからなくて困っていませんか？
実は、YouTubeの埋め込みコードを使えば、誰でも簡単に動画をウェブページに表示させることができます。この記事では、埋め込みコードの取得方法から、カスタマイズのコツまでわかりやすく解説します。
YouTube埋め込みコードとは？基本を理解しよう
YouTube埋め込みコードとは、YouTube上の動画を外部のウェブサイトやブログに表示するためのHTMLコードのことです。このコードをページに貼り付けるだけで、訪問者がYouTubeに移動しなくても動画を視聴できるようになります。まずは基本的な仕組みを理解しておきましょう。
埋め込みコードの仕組みとiframeタグ
YouTube埋め込みコードは「iframeタグ」と呼ばれるHTMLの要素を使って構成されています。
iframeとは「インラインフレーム」の略で、ウェブページの中に別のウェブページやコンテンツを表示させるための仕組みです。
YouTubeの埋め込みコードをコピーしてHTMLに貼り付けると、そのiframeの中にYouTubeのプレーヤーが表示される形になります。実際のコードは以下のような構造になっています。
例：<iframe width="560" height="315" src="https://www.youtube.com/embed/動画ID" frameborder="0" allowfullscreen></iframe>
このように、幅・高さ・動画のURL・各種オプションなどがひとつのタグにまとまっています。
埋め込みコードを使うメリット
埋め込みコードを使う最大のメリットは、動画ファイルをサーバーにアップロードしなくても動画コンテンツを提供できる点です。
動画ファイルは容量が非常に大きいため、自前のサーバーにアップロードすると負荷がかかりやすくなります。YouTubeのサーバーを利用することで、自分のサイトの表示速度を維持しながら動画を掲載できます。
また、YouTubeの再生機能（一時停止・音量調整・全画面表示など）がそのまま使えるため、ユーザーにとっても快適な視聴体験を提供できます。
YouTube埋め込みコードの取得方法【PC・スマホ別】
埋め込みコードを取得する手順はとてもシンプルです。PCとスマホでは操作方法が若干異なるため、それぞれの手順をわかりやすく説明します。自分の環境に合わせて確認してみてください。
PCでの埋め込みコード取得手順
PCからYouTube埋め込みコードを取得する場合は、動画ページの「共有」ボタンを使うのが最も簡単な方法です。
まず、埋め込みたい動画をYouTubeで開きます。動画プレーヤーの下に表示されるメニューの中から「共有」ボタンをクリックしてください。
すると共有オプションが表示されますので、その中から「埋め込む」を選択します。すると自動的にiframeタグが生成されますので、「コードをコピー」ボタンを押してクリップボードに保存しましょう。
あとは自分のウェブサイトやブログの編集画面でHTMLモードに切り替え、表示させたい場所にコードを貼り付けるだけで完了です。
スマホでの埋め込みコード取得手順
スマホのYouTubeアプリでは、埋め込みコードの取得機能が用意されていないため、ブラウザからアクセスする方法がおすすめです。
スマホのブラウザ（ChromeやSafariなど）でYouTubeのサイトにアクセスし、埋め込みたい動画のページを開きます。ページ下部のメニューをデスクトップ表示に切り替えると、PCと同様の操作が可能になります。
Chromeの場合は右上のメニューから「PC版サイト」をオンにすることでデスクトップ表示に切り替えられます。その後はPCと同じ手順で「共有」→「埋め込む」と進めばコードを取得できます。
YouTube埋め込みコードのカスタマイズ方法
デフォルトで生成される埋め込みコードをそのまま使うだけでなく、パラメータを追加することでさまざまなカスタマイズが可能です。サイトのデザインや用途に合わせて調整することで、より効果的に動画を活用できます。
サイズ（幅・高さ）を変更する方法
埋め込みコードのwidthとheightの数値を変更することで、動画の表示サイズを自由に調整できます。
デフォルトでは width=”560″ height=”315″ と設定されていますが、これをサイトのレイアウトに合わせて変更することができます。例えば、幅を800pxにしたい場合は width=”800″ height=”450″ のように16:9の比率を保ちながら変更するのがおすすめです。
また、レスポンシブ対応させたい場合はCSSを使った方法も効果的です。iframeをdivタグで囲み、CSSでpadding-bottom: 56.25%（16:9の比率）を指定する方法が一般的に使われています。
自動再生・ループ再生を設定する方法
YouTubeの埋め込みコードにパラメータを追加することで、自動再生やループ再生などの動作を設定できます。
自動再生を有効にするには、URLの末尾に「?autoplay=1」を追加します。ただし、多くのブラウザでは音声付きの自動再生をブロックするため、合わせて「mute=1」（ミュート）を指定することが推奨されます。
例：src="https://www.youtube.com/embed/動画ID?autoplay=1&mute=1"
ループ再生を設定するには「loop=1」と「playlist=動画ID」の両方を追加する必要があります。これはYouTubeの仕様上、loopパラメータ単体では機能しないためです。
関連動画・コントロールバーを非表示にする方法
動画再生終了後に表示される関連動画を非表示にしたい場合は「rel=0」パラメータを使用します。
ただし、YouTube側の仕様変更により、2018年以降は完全に非表示にすることが難しくなっており、rel=0を設定しても自チャンネルの動画が表示されることがあります。
コントロールバー（再生ボタンや音量スライダーなど）を非表示にしたい場合は「controls=0」を追加します。ただし、ユーザーが操作できなくなるため、使用シーンを選ぶ必要があります。
特定の時間から再生を開始する方法
動画の途中から再生を開始させたい場合は「start=秒数」パラメータを使用します。
例えば、1分30秒から再生させたい場合は「start=90」と指定します。これは長い動画の中で特定の箇所を紹介したいときに非常に便利な機能です。
終了時間を指定したい場合は「end=秒数」を追加することで、指定した秒数で再生が止まります。特定のシーンだけを見せたいときに活用できます。
WordPressへのYouTube埋め込み方法
WordPressを使ってサイトを運営している方にとって、YouTubeの埋め込み方法はいくつかの選択肢があります。埋め込みコードを直接貼り付ける方法から、URLを貼るだけで対応できる方法まで、それぞれの特徴を確認しておきましょう。
ブロックエディタ（Gutenberg）での埋め込み方法
WordPressの標準エディタであるブロックエディタを使えば、YouTubeのURLを貼り付けるだけで自動的に動画が埋め込まれます。
ブロックエディタの編集画面で「+」ボタンから「YouTube」ブロックを追加するか、URLをそのままテキストとして貼り付けるだけで自動的に動画プレーヤーに変換されます。
より細かいカスタマイズが必要な場合は、「カスタムHTML」ブロックを追加して、YouTubeから取得した埋め込みコードをそのまま貼り付ける方法がおすすめです。
クラシックエディタでの埋め込み方法
クラシックエディタを使用している場合は、テキストモードに切り替えてから埋め込みコードを貼り付けることが重要なポイントです。
ビジュアルモードのままコードを貼り付けると、HTMLタグがテキストとして表示されてしまう場合があります。必ず編集画面右上の「テキスト」タブをクリックしてテキストモードに切り替えてから貼り付けを行いましょう。
なお、WordPressはデフォルトでYouTubeのURLを自動的に埋め込みに変換するoEmbedという機能も備えています。URLをビジュアルモードに貼り付けるだけで動画が表示されることも多いため、まずこの方法を試してみるのもよいでしょう。
YouTube埋め込みコードが表示されない・エラーが出るときの対処法
埋め込みコードを貼り付けたのに動画が表示されない、エラーメッセージが出るといったトラブルは比較的よく起こります。原因と対処法を把握しておけば、問題が発生しても落ち着いて対処できます。
「この動画は埋め込みが無効になっています」と表示される場合
このエラーは、動画のアップロード主が埋め込みを禁止している設定にしているために発生します。
この場合、第三者側での設定変更はできません。動画の投稿者に埋め込みを許可してもらうよう連絡するか、別の動画を探すしかありません。
自分がアップロードした動画でこの表示が出る場合は、YouTube Studioの動画詳細設定から「埋め込みを許可する」の設定を有効にすることで解決できます。
動画がページに表示されない場合の確認ポイント
埋め込みコードを貼り付けても動画が表示されない場合は、まずHTMLの記述に問題がないか確認しましょう。
よくある原因のひとつが、WordPressのビジュアルエディタで貼り付けたことによるコードの破損です。必ずHTMLモードやテキストモードで貼り付けを行うようにしてください。
また、使用しているプラグインやセキュリティ設定がiframeタグをブロックしている場合もあります。セキュリティ系プラグインの設定を見直すか、一時的に無効化して確認してみましょう。
まとめ：YouTube埋め込みコードを活用してサイトをより魅力的に
YouTube埋め込みコードを活用すれば、ウェブサイトやブログに手軽に動画コンテンツを取り入れることができます。ここまで解説した内容を振り返りながら、要点を整理しておきましょう。
まず、埋め込みコードはYouTubeの「共有」→「埋め込む」から簡単に取得できます。
取得したコードはそのまま使うだけでなく、パラメータを追加することでサイズの変更・自動再生・ループ再生・開始時間の指定など、さまざまなカスタマイズが可能です。WordPressを使っている場合は、URLを貼るだけの簡単な方法も活用できます。
動画が表示されないトラブルが発生した場合は、埋め込みの許可設定やHTMLモードでの貼り付けを確認することが解決への近道です。
動画コンテンツはユーザーの滞在時間を伸ばし、サイトの魅力を高める効果的な手段です。ぜひこの記事を参考に、YouTubeの埋め込み機能をどんどん活用してみてください。
