YouTubeの動画を自分のウェブサイトやブログに埋め込みたいのに、やり方がわからなくて困っていませんか？
実は、YouTube埋め込みコードの取得と設置はとても簡単です。この記事では、基本的な埋め込み方法から、サイズ変更・自動再生などの便利なカスタマイズ方法まで、初心者にもわかりやすく解説します。
YouTube埋め込みコードとは？基本を理解しよう
YouTube埋め込みコードとは、YouTubeの動画を自分のウェブサイトやブログに貼り付けるためのHTMLコードのことです。このコードを使うことで、視聴者はYouTubeのサイトに移動せずに、そのままあなたのページ上で動画を視聴することができます。
埋め込みコードの仕組み
YouTube埋め込みコードは「iframeタグ」と呼ばれるHTMLの要素を使って作られています。
iframeとは「インラインフレーム」の略で、ウェブページの中に別のウェブページや外部コンテンツを表示するための仕組みです。
YouTubeが提供する埋め込みコードは以下のような形式になっています。
例：<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/動画ID” frameborder=”0″ allowfullscreen></iframe>
この中に含まれる「動画ID」がそれぞれの動画を識別するユニークな文字列です。URLの「v=」以降の部分がこれに該当します。
埋め込みと共有リンクの違い
「共有リンク」はYouTubeへのリンクURLであり、「埋め込みコード」はページ内に動画プレイヤーを直接表示するHTMLコードです。
共有リンクをクリックすると、視聴者はYouTubeのサイトに移動してしまいます。一方、埋め込みコードを使えば、あなたのページを離れることなく動画を楽しんでもらえます。
サイトの回遊率や滞在時間を上げたい場合は、埋め込みコードの活用が非常に効果的です。
YouTube埋め込みコードの基本的な取得方法
YouTube埋め込みコードの取得は、特別なツールや知識がなくても、YouTube上で数クリックするだけで完了します。ここでは、PC・スマートフォンそれぞれの手順をわかりやすく説明します。
PCでの取得手順
PCからYouTube埋め込みコードを取得する手順はとてもシンプルで、初めての方でも迷わず操作できます。
まず、埋め込みたい動画をYouTubeで開きます。動画の下にある「共有」ボタンをクリックしてください。
共有メニューが表示されたら、その中の「埋め込む」というオプションを選択します。するとiframeタグを含む埋め込みコードが表示されます。
「コードをコピー」ボタンをクリックすれば、クリップボードにコードがコピーされます。あとはご自身のウェブサイトやブログのHTML編集画面に貼り付けるだけです。
スマートフォンでの取得手順
スマートフォンのYouTubeアプリからも埋め込みコードを取得することが可能です。
アプリで対象の動画を開き、動画下部の「共有」アイコン（矢印マーク）をタップします。表示されたメニューの中から「埋め込む」を選択してください。
埋め込みコードが表示されるので、「コードをコピー」をタップしてコピーします。その後、ウェブサイト管理ツールやメモアプリに貼り付けて利用しましょう。
なお、スマートフォンのブラウザ版YouTubeでも同様の手順で取得可能です。アプリが使いにくい場合はブラウザを活用してみてください。
YouTube埋め込みコードのカスタマイズ方法
YouTubeの埋め込みコードは、そのまま使うだけでなく、さまざまなパラメーターを追加することで表示や動作をカスタマイズできます。サイズの変更から自動再生、ループ再生まで、よく使われる設定を詳しく紹介します。
動画サイズ（幅・高さ）を変更する
埋め込みコードの「width」と「height」の数値を変更するだけで、動画の表示サイズを自由に調整できます。
デフォルトのサイズは幅560px・高さ315pxに設定されていますが、サイトのレイアウトに合わせて変更することをおすすめします。
アスペクト比（縦横比）は16:9が標準です。幅を変更した場合は、高さも同じ比率で調整するときれいに表示されます。例えば幅を800pxにする場合、高さは450pxにすると適切です。
また、レスポンシブ対応（スマホでも綺麗に表示）させたい場合は、widthとheightの数値を削除し、CSSで制御する方法がおすすめです。
自動再生を設定する
動画を自動再生させるには、srcのURLに「?autoplay=1」というパラメーターを追加します。
例：src=”https://www.youtube.com/embed/動画ID?autoplay=1″
ただし、多くのブラウザでは音声付きの自動再生がブロックされる仕様になっています。自動再生を確実に機能させたい場合は、「mute=1」を追加して音声をミュートにする必要があります。
例：src=”https://www.youtube.com/embed/動画ID?autoplay=1&mute=1″
自動再生はユーザー体験に影響を与えることがあるため、必要な場面に絞って活用することをおすすめします。
ループ再生を設定する
動画を繰り返し再生させたい場合は、「loop=1」と「playlist=動画ID」を組み合わせて指定します。
例：src=”https://www.youtube.com/embed/動画ID?loop=1&playlist=動画ID”
loopパラメーターだけでは正常に機能しない場合があるため、playlistパラメーターに同じ動画IDを指定するのがポイントです。
店舗のデジタルサイネージやプロモーション用ページなど、繰り返し動画を流し続けたい場面で非常に便利な設定です。
関連動画の非表示・コントロールバーの設定
動画終了後に表示される関連動画を非表示にするには「rel=0」を追加します。
例：src=”https://www.youtube.com/embed/動画ID?rel=0″
また、再生ボタンやシークバーなどのコントロールバーを非表示にしたい場合は「controls=0」を追加します。ただし、コントロールを非表示にすると視聴者が操作できなくなるため、使用シーンをよく考えて設定しましょう。
複数のパラメーターを同時に使いたい場合は「&」でつなげて記述します。例：?autoplay=1&mute=1&rel=0
WordPressやブログサービスへの埋め込み方法
取得した埋め込みコードを実際のウェブサイトやブログに設置する方法は、使用しているサービスによって異なります。代表的なWordPressやアメブロ・はてなブログでの手順を解説します。
WordPressへの埋め込み
WordPressで埋め込みコードを使うには、投稿編集画面で「カスタムHTML」ブロックを使用するのが最もシンプルな方法です。
Gutenbergエディター（ブロックエディター）を使用している場合、「+」ボタンをクリックしてブロックを追加し、「カスタムHTML」を選択します。
表示されたテキストエリアにYouTubeの埋め込みコードを貼り付けて、プレビューで確認してから公開してください。
なお、WordPressではYouTubeのURLをそのまま貼り付けるだけで自動的に動画が埋め込まれる「oEmbed」機能も搭載されています。カスタマイズ不要の場合はこちらの方法が手軽でおすすめです。
アメブロ・はてなブログへの埋め込み
アメブロやはてなブログでは、記事のHTML編集モードに切り替えて埋め込みコードを貼り付けます。
アメブロの場合、記事編集画面の上部にある「HTML表示」ボタンをクリックしてHTMLモードに切り替え、貼り付けたい位置にコードを挿入します。
はてなブログでは、編集モードを「HTML編集」に切り替えることで同様の操作が可能です。編集画面右側のタブから切り替えられます。
一部のブログサービスではセキュリティの関係でiframeタグが使用できない場合があります。その際はサービスの公式ヘルプページで対応方法を確認してみましょう。
YouTube埋め込みコードに関するよくあるトラブルと解決策
埋め込みコードを設置してみたものの、うまく表示されない・再生できないといったトラブルが発生することがあります。よくある問題とその解決方法をまとめましたので、困ったときの参考にしてください。
動画が表示されない場合
動画が表示されない最も多い原因は、動画の投稿者が「埋め込みを無効」に設定しているケースです。
YouTubeでは、動画のオーナーが埋め込みを許可するかどうかを設定できます。埋め込みが無効になっている動画は、iframeコードを貼り付けても表示されません。
この場合は、別の動画を探すか、動画の投稿者に埋め込み許可の設定変更をお願いするしか解決策がありません。
また、ブログサービス側がiframeを許可していない場合も表示されないことがあります。使用しているサービスの仕様を確認してみてください。
動画のサイズがレイアウトに合わない場合
スマートフォンで閲覧したときに動画が画面からはみ出してしまう場合は、レスポンシブ対応のCSSを追加することで解決できます。
以下のようなCSSを使うと、動画を画面幅に合わせて自動調整できます。
.video-wrap { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
.video-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
このCSSを適用したうえで、iframeをdivタグ（class=”video-wrap”）で囲むことで、どんな画面サイズでも適切に表示されるようになります。
著作権・利用規約に関する注意点
YouTubeの埋め込み機能を使う場合でも、著作権や利用規約に違反するコンテンツの埋め込みは禁止されています。
YouTubeの利用規約では、埋め込み機能の使用は許可されていますが、著作権を侵害する動画や公式に許可されていないコンテンツを埋め込むことはできません。
また、商用サイトで他者の動画を埋め込む場合は、特に慎重に権利関係を確認することをおすすめします。自分が権利を持つ動画か、埋め込み許可が明示されているコンテンツのみ使用するようにしましょう。
まとめ：YouTube埋め込みコードを活用してサイトを充実させよう
この記事では、YouTube埋め込みコードの基本から取得方法、カスタマイズ、各種ブログへの設置方法、トラブル対処法までを網羅的に解説しました。ポイントをまとめると以下のとおりです。
YouTube埋め込みコードは、動画ページの「共有」→「埋め込む」から簡単に取得できます。
取得したiframeコードにパラメーターを追加することで、自動再生・ループ再生・サイズ変更などさまざまなカスタマイズが可能です。WordPressならカスタムHTMLブロック、アメブロ・はてなブログならHTML編集モードで貼り付けることができます。
動画が表示されない場合は、埋め込み設定の確認やレスポンシブCSSの適用で解決できることが多いです。著作権や利用規約にも気をつけながら、正しく埋め込み機能を活用しましょう。
YouTube埋め込みコードをうまく活用することで、ウェブサイトのコンテンツがより豊かになり、訪問者の滞在時間アップにもつながります。ぜひ今日からご自身のサイトやブログに取り入れてみてください。