YouTubeの動画を自分のWebサイトやブログに埋め込みたいのに、コードの取得方法や設定方法がわからなくて困っていませんか？
実は、YouTube埋め込みコードの取得はとても簡単で、数クリックで完了します。この記事では、基本的な取得方法から、サイズ変更・自動再生などの便利なオプション設定まで、わかりやすく解説します。ぜひ最後まで読んで、すぐに活用してみてください。
YouTube埋め込みコードとは？基本知識をおさらい
YouTube埋め込みコードとは、YouTube上の動画を外部のWebサイトやブログに表示させるためのHTMLコードのことです。このコードを使うことで、視聴者がYouTubeのサイトに移動しなくても、あなたのページ内で直接動画を再生できるようになります。まずは基本的な仕組みを理解しておきましょう。
埋め込みコードの仕組み
YouTube埋め込みコードは、主に「iframeタグ」と呼ばれるHTML要素で構成されています。
iframeとは「インラインフレーム」の略で、Webページの中に別のページやコンテンツを表示する枠組みのことです。
YouTubeが提供する埋め込みコードには、動画のURLや縦横サイズ、再生オプションなどの情報が含まれており、コピー＆ペーストするだけでサイトに動画を表示できます。
埋め込みと動画リンクの違い
動画のURLをそのまま貼り付けるのと、埋め込みコードを使うのでは、ユーザー体験が大きく異なります。
URLを貼り付けた場合、クリックするとYouTubeのサイトに遷移してしまいます。一方、埋め込みコードを使えば、サイトを離れることなく動画を視聴できるため、離脱率の低下やページ滞在時間の向上が期待できます。
コンテンツの質を高め、読者に快適な体験を提供するためにも、埋め込みコードの活用はとても有効です。
YouTube埋め込みコードの基本的な取得方法
YouTube埋め込みコードの取得は、パソコンでもスマートフォンでも簡単に行えます。ここでは最もオーソドックスなパソコンからの取得手順を、画面の操作に沿ってステップごとに丁寧に説明します。初めての方でも迷わず進められるので安心してください。
パソコンからの取得手順
まず、埋め込みたい動画をYouTubeで開き、動画プレイヤー下部にある「共有」ボタンをクリックします。
「共有」ボタンをクリックすると、共有方法を選ぶダイアログが表示されます。その中に「埋め込む」という選択肢があるので、それをクリックしてください。
すると、iframeタグで記述された埋め込みコードが表示されます。右下の「コピー」ボタンを押すだけで、クリップボードにコードがコピーされます。あとは自分のサイトのHTML編集画面に貼り付けるだけで完了です。
スマートフォンからの取得手順
スマートフォンのYouTubeアプリでも、埋め込みコードを取得することは可能です。
動画を開いたら、動画タイトルの下にある「共有」アイコンをタップします。次に表示されるメニューから「埋め込む」を選択すると、埋め込みコードが表示されます。
ただし、スマートフォンのアプリ版では表示されないケースもあるため、その場合はブラウザ版のYouTube（youtube.com）にアクセスして、デスクトップ表示モードに切り替えて操作するとスムーズです。
埋め込みコードのオプション設定をカスタマイズする方法
YouTubeの埋め込みコードは、取得時にさまざまなオプションを設定することができます。自動再生・ループ再生・関連動画の非表示など、目的に合わせてカスタマイズすることで、より効果的に動画をサイトに組み込めます。ここでは代表的なオプションの使い方を紹介します。
自動再生を設定する
自動再生を有効にするには、埋め込みコードのURLに「autoplay=1」というパラメータを追加します。
例えば、埋め込みコード内のsrc属性のURLが「https://www.youtube.com/embed/XXXXXXX」となっている場合、「https://www.youtube.com/embed/XXXXXXX?autoplay=1」のように「?autoplay=1」を末尾に追加します。
ただし、多くのブラウザでは音声付きの自動再生が制限されているため、自動再生させたい場合は「mute=1」（ミュート）も合わせて設定することをおすすめします。「?autoplay=1&mute=1」のように「&」でつなげて記述します。
関連動画を非表示にする
動画終了後に表示される関連動画を非表示にしたい場合は、「rel=0」というパラメータを使います。
「rel=0」を設定すると、動画終了後に表示される関連動画を、同じチャンネルの動画のみに制限することができます。完全に非表示にすることは現在のYouTubeの仕様では難しいですが、無関係な動画が表示されるのを抑えることが可能です。
複数のパラメータを同時に使う場合は、「?autoplay=1&rel=0&mute=1」のように「&」でつなげて記述してください。
ループ再生を設定する
動画を繰り返し再生したい場合は、「loop=1」と「playlist=動画ID」のパラメータを組み合わせて使います。
動画IDとは、YouTubeのURLに含まれる「v=」以降の文字列のことです。例えば「https://www.youtube.com/watch?v=XXXXXXX」であれば「XXXXXXX」が動画IDになります。
ループ設定の記述例は「?loop=1&playlist=XXXXXXX」のようになります。この設定をすることで、動画が終わると自動的に最初から再生されるようになります。
埋め込み動画のサイズを変更する方法
YouTubeの埋め込みコードには、デフォルトで幅と高さが設定されています。しかし、サイトのレイアウトによっては、サイズが合わないこともあります。ここでは、固定サイズでの変更方法と、レスポンシブ対応にする方法を解説します。
widthとheightを直接変更する
埋め込みコードの中にある「width」と「height」の数値を書き換えるだけで、動画のサイズを変更できます。
デフォルトでは「width=”560″ height=”315″」のように設定されています。これを「width=”800″ height=”450″」のように変更することで、表示サイズを調整できます。
YouTubeの動画は16:9のアスペクト比で作られているものがほとんどです。そのため、縦横比を16:9に保つことで、動画が見切れたり黒帯が入ったりすることなく、きれいに表示されます。
レスポンシブ対応にする方法
スマートフォンやタブレットなど、さまざまな画面サイズに対応させるためには、レスポンシブデザインの設定が必要です。
iframeをそのまま貼り付けるだけでは、画面幅に合わせてサイズが変わらず、スマートフォンでの表示が崩れてしまいます。
レスポンシブ対応にするには、以下のようにCSSを組み合わせた方法が有効です。まず、iframeを「div」タグで囲み、そのdivタグに「position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;」のCSSを適用します。次にiframeタグ自体には「position: absolute; top: 0; left: 0; width: 100%; height: 100%;」を適用することで、画面幅に応じて動画サイズが自動的に調整されます。
WordPressで埋め込みコードを使う方法
WordPressでYouTube動画を埋め込む場合、いくつかの方法があります。コードを直接貼り付ける方法のほか、WordPressの便利な機能を活用する方法もあります。自分の環境や目的に合った方法を選んでみましょう。
HTMLモードで直接貼り付ける
WordPressのブロックエディター（Gutenberg）では、「カスタムHTML」ブロックを追加して、その中にYouTubeの埋め込みコードを貼り付けることができます。
記事編集画面でブロックを追加する際に「カスタムHTML」を選択し、取得した埋め込みコードをそのまま貼り付けるだけです。プレビューボタンで表示を確認しながら作業できるので安心です。
クラシックエディターを使っている場合は、「テキスト」タブに切り替えてから埋め込みコードを貼り付けてください。「ビジュアル」タブのまま貼り付けると、コードが正しく認識されないことがあります。
WordPressのURL貼り付け機能を使う
実はWordPressでは、YouTubeのURLをそのまま貼り付けるだけで、自動的に動画が埋め込まれる「oEmbed」機能が搭載されています。
ブロックエディターでは、YouTubeのURLを段落ブロックに貼り付けると、自動的に動画プレイヤーとして表示されます。特別な設定や埋め込みコードの取得は不要なので、手軽に動画を挿入したいときに便利です。
ただし、細かいオプション設定（自動再生やループなど）を行いたい場合は、カスタムHTMLブロックを使って手動で埋め込みコードを貼り付ける方法が適しています。
埋め込みができない場合のトラブルシューティング
YouTube埋め込みコードを設定したのに動画が表示されない、またはエラーが出るといったトラブルが起きることがあります。よくある原因と対処法を知っておくことで、スムーズに問題を解決できます。ここでは代表的なトラブルとその解決策を紹介します。
動画の埋め込みが制限されている場合
YouTube動画には、動画のオーナーが埋め込みを禁止している場合があります。
この場合、埋め込みコードをサイトに貼り付けても「この動画は他のウェブサイトでの再生は許可されていません」というメッセージが表示されます。
残念ながら、この制限はユーザー側では解除できません。別の動画を探すか、埋め込みが許可されているチャンネルや動画を使用するようにしましょう。自分で投稿した動画であれば、YouTube Studioの動画設定から埋め込み許可をオンにすることができます。
コードが正しく貼り付けられていない場合
埋め込みコードが表示されない原因として、コードの貼り付け先が「ビジュアルモード」になっていることがよくあります。
HTMLの埋め込みコードは、必ずHTMLモード（テキストモード）に切り替えてから貼り付ける必要があります。ビジュアルモードに貼り付けると、タグが文字列としてそのまま表示されてしまいます。
また、コピーの際に余分なスペースや文字が混入していないか確認することも大切です。テキストエディターに一度貼り付けてから、改めてコピーして使うと安心です。
まとめ：YouTube埋め込みコードを活用してサイトを充実させよう
この記事では、YouTube埋め込みコードの基本知識から取得方法、オプション設定、WordPressでの活用法、トラブル対処法まで幅広く解説しました。最後に要点を整理しておきましょう。
YouTube埋め込みコードは、動画ページの「共有」→「埋め込む」から簡単に取得できます。
取得したコードにパラメータを追加することで、自動再生・ループ・関連動画非表示などのカスタマイズが可能です。また、レスポンシブ対応のCSSを組み合わせることで、スマートフォンでも崩れない表示を実現できます。
WordPressではカスタムHTMLブロックを使う方法と、URLをそのまま貼り付けるoEmbed機能の2つの方法があります。目的に応じて使い分けると便利です。
埋め込みができない場合は、動画の埋め込み制限の有無や、貼り付けモードの確認をまず行いましょう。これらを押さえておけば、ほとんどのトラブルは解決できます。
YouTube埋め込みコードをうまく活用して、サイトやブログのコンテンツをさらに充実させてみてください。動画コンテンツはユーザーの滞在時間を伸ばし、情報をわかりやすく伝える強力なツールです。ぜひ積極的に取り入れていきましょう。
