STUDIOでYouTubeを埋め込みたいときは、動画URLを入れればよいのか、YouTubeのiframeコードを貼るべきなのか、動画ボックスを使うべきなのかで迷いやすいです。見た目は同じ「動画」でも、通常のページ、CMS記事、背景動画では使う機能や注意点が少し変わります。
この記事では、STUDIOでYouTube動画を表示する基本の考え方から、埋め込み手順、表示されないときの確認ポイント、スマホ表示や自動再生の注意点まで整理します。自分のページでどの方法を選べばよいか判断できるように、使う場面ごとに分けて説明します。
studio youtube 埋め込みはEmbedボックスが基本
STUDIOでYouTube動画をページ内に表示したい場合、基本はEmbedボックスを使います。YouTubeにアップロード済みの動画をSTUDIOのページ上に見せる方法なので、動画ファイルをSTUDIOへ直接アップロードする必要はありません。サービス紹介動画、店舗紹介動画、インタビュー動画、採用動画、使い方動画などをページの途中に配置したいときは、この方法が最も扱いやすいです。
一方で、STUDIOには動画ボックスという機能もあります。これはmp4やwebmなどの動画ファイルをSTUDIOに直接アップロードして配置するための機能で、YouTubeのURLを入れて使うものではありません。ここを混同すると「YouTubeのURLを入れたいのに反映されない」「動画ボックスに貼っても表示されない」という状態になりやすいです。
まずは、何をしたいのかで使う機能を分けると判断しやすくなります。
| やりたいこと | 使う機能 | 向いている場面 |
|---|---|---|
| YouTube動画をページ内に表示したい | Embedボックス | サービス紹介、実績紹介、動画付きLP |
| mp4やwebmを直接配置したい | 動画ボックス | 短い演出動画、ファーストビュー、素材動画 |
| CMS記事内にYouTubeを載せたい | CMS本文の埋め込み | ブログ、ニュース、事例記事 |
| 背景として動画を流したい | 背景動画用の埋め込み設定 | メインビジュアル、ブランド訴求 |
通常のWebページにYouTubeを載せるだけなら、難しく考えすぎる必要はありません。STUDIO側ではEmbedボックスを置き、YouTube側では動画ページのURLを用意します。大切なのは、短縮URLや共有用URLではなく、STUDIOが読み取りやすい形式のURLを使うことです。
URLを入れる方法が扱いやすい
STUDIOでYouTubeを埋め込むときは、まずYouTubeの動画ページを開き、ブラウザのアドレスバーに表示されている通常の動画URLを使うのが基本です。YouTubeの共有ボタンから取得できる短縮URLは便利ですが、STUDIO側でうまく認識されないことがあります。うまく表示されない場合は、まずURL形式を見直すと解決しやすいです。
たとえば、動画ページのURLは「watch」が含まれる形式になっていることが多く、STUDIOのYouTube埋め込みではこの形式を使うほうが安全です。共有ボタンで取得した短いURL、再生リスト付きのURL、時間指定付きのURL、余計なパラメータが多いURLは、埋め込み表示のトラブルにつながることがあります。最初は一番シンプルな動画単体のURLで確認しましょう。
また、YouTubeのiframeコードをそのまま貼る方法と、STUDIOの設定欄に動画URLを入れる方法を混同しないことも大切です。STUDIOのYouTube用の埋め込み欄がある場合は、iframe全体ではなく動画ページのURLを入れる前提で考えます。反対に、カスタムコードや汎用のHTML埋め込みを使う場面では、YouTubeの埋め込みコードを使う場合もあります。
動画ボックスとの違いを押さえる
STUDIOの動画ボックスは、YouTube動画を表示するための箱ではなく、動画ファイルそのものをページに配置するための機能です。自分で作成した短いmp4、背景用のwebm、商品イメージ動画などを直接アップロードして使う場合に向いています。YouTubeの視聴ページURLを動画ボックスに入れても、期待したように再生されるわけではありません。
YouTube埋め込みのよいところは、動画の管理をYouTube側でできる点です。動画の差し替え、公開設定、サムネイル、再生回数、チャンネル導線などはYouTube側の管理画面で扱えます。サイト側に大きな動画ファイルを置かないため、ページ管理も比較的シンプルです。
ただし、YouTubeを使う以上、プレイヤーの見た目や挙動はYouTubeの仕様に影響されます。再生ボタン、タイトル表示、関連動画、スマホでの自動再生制限など、STUDIO側だけでは完全に自由にできない部分があります。デザインを完全にコントロールしたい場合は、YouTube埋め込みではなく、直接アップロードした動画を使う選択肢も考えたほうがよいです。
まず確認したい表示場所
STUDIOでYouTubeを埋め込む前に、どこに動画を置きたいのかを決めておくと失敗しにくくなります。通常ページのセクション内に置くのか、CMS記事本文の中に置くのか、背景動画として使うのかで、手順や注意点が変わるためです。特にLP制作や店舗サイトでは、動画の役割を決めずに置くと、ページが重くなったり、スマホで見づらくなったりします。
通常ページに置く場合は、サービスの説明を補足する動画として扱いやすいです。たとえば、ファーストビューの少し下に「サービス紹介動画」を置いたり、実績セクションに「施工事例動画」を入れたりできます。CMS記事に置く場合は、記事の本文中で補足資料として動画を見せる形になります。
背景動画として使う場合は、見た目の印象は強くなりますが、再生の制限や表示速度の問題も出やすくなります。YouTube動画を背景として使うと、プレイヤーのUIやタイトルが完全には隠せない場合があるため、ブランドサイトや採用LPでは特に慎重に確認したほうがよいです。
| 表示場所 | 判断ポイント | 注意点 |
|---|---|---|
| 通常ページ | 動画を見せたい位置にEmbedボックスを配置する | スマホで横幅が崩れないか確認する |
| CMS記事 | 本文内の説明に合わせて動画を入れる | 記事テンプレート側の幅に影響される |
| 背景動画 | 雰囲気づくりを目的に使う | 自動再生やUI表示に制限がある |
| ファーストビュー | 最初に伝える印象を強める | 読み込み速度と代替画像を考える |
通常ページに入れる場合
会社サイト、店舗サイト、サービスLPなどの通常ページにYouTubeを埋め込む場合は、STUDIOのエディタ上で動画を置きたいセクションを決め、そこにEmbedボックスを配置します。横幅いっぱいに見せるのか、テキストの横に小さく置くのかで、動画の印象は大きく変わります。サービス説明の補足なら本文の近くに、実績訴求ならお客様の声や事例の近くに置くと自然です。
動画は目を引きますが、ページの主役を奪いやすい要素でもあります。たとえば、問い合わせボタンの直前に長い動画を置くと、読者が動画視聴で止まってしまい、フォームやCTAまで進まないことがあります。逆に、動画の直後に問い合わせボタンや資料請求ボタンを置くと、動画で興味が高まった流れを次の行動につなげやすくなります。
配置する幅は、スマホ表示を前提に考えることが大切です。パソコンでは横長の動画がきれいに見えても、スマホでは上下の余白が大きく見えたり、周囲のテキストとの距離が詰まったりします。STUDIOのレスポンシブ設定で、PC、タブレット、スマホそれぞれの余白と横幅を確認しておきましょう。
CMS記事に入れる場合
STUDIO CMSの記事内にYouTubeを入れる場合は、通常ページとは少し考え方が変わります。CMSでは、記事ごとに動画を差し込みたいのか、すべての記事テンプレートに同じ動画を表示したいのかを分けて考える必要があります。たとえば、ブログ記事ごとに解説動画を変えるなら記事本文内への埋め込みが向いています。
一方で、すべての事例記事の下に同じ会社紹介動画を出したい場合は、CMSテンプレート側に共通パーツとして動画を置くほうが管理しやすいです。記事ごとに毎回同じYouTubeを貼ると、後から動画を差し替えるときに複数の記事を編集する必要があります。更新頻度が高いサイトほど、個別に置くものと共通で置くものを分けておくと運用が楽になります。
CMS記事では、本文幅やテンプレートの余白によって動画の見え方が変わります。記事本文が狭いレイアウトの場合、動画が小さく見えすぎることがありますし、逆に余白が少ないと圧迫感が出ます。公開前には、実際の記事ページでサムネイル、再生ボタン、上下の文章とのつながりを確認しておきましょう。
背景動画に使う場合
YouTube動画を背景のように使いたい場合は、通常の埋め込みよりも注意点が増えます。背景動画はページを開いた瞬間の印象を強められますが、YouTube側の仕様により、タイトルや再生バーが表示されたり、スマホでは自動再生が制限されたりすることがあります。特にファーストビューに使う場合は、想定どおりに再生されない環境がある前提で設計したほうが安全です。
背景用途では、音声の扱いにも注意が必要です。突然音が出るページはユーザー体験を損ねやすく、ブラウザや端末側でも自動再生が制限されることがあります。そのため、背景として使う動画は、音声がなくても意味が伝わる映像にするか、最初から雰囲気づくりの素材として割り切るのが現実的です。
また、背景動画の代わりに静止画を用意しておくと、表示トラブルに強くなります。スマホでは静止画を表示し、PCでは動画を使うといった使い分けも検討できます。採用サイト、ブランディングサイト、店舗のトップページでは、動画そのものよりも「見た人がすぐ内容を理解できるか」を優先して判断しましょう。
STUDIOで埋め込む手順
STUDIOでYouTubeを埋め込む作業は、流れを分けると難しくありません。先にYouTube側で動画URLを確認し、次にSTUDIO側でEmbedボックスを配置し、最後に表示サイズとスマホ表示を調整します。動画が表示されるかどうかだけで終わらせず、ページ全体の流れの中で自然に見えるかまで確認することが大切です。
基本の流れは次の通りです。
- YouTubeで埋め込みたい動画ページを開く
- ブラウザのアドレスバーから動画URLをコピーする
- STUDIOで動画を置きたいページを開く
- Embedボックスを追加する
- 設定欄にYouTube動画のURLを入力する
- PC、タブレット、スマホで表示を確認する
- 余白、横幅、上下のテキストとの距離を調整する
このとき、最初から複雑なパラメータを付けて調整しようとしないほうがよいです。まずは動画単体が正しく表示される状態を作り、その後で自動再生、ループ、開始位置などのカスタマイズを検討します。表示されない原因を切り分けやすくするためにも、最初はシンプルなURLでテストしましょう。
YouTube側でURLを準備する
YouTube側で最初に確認するのは、動画が公開状態になっているかどうかです。公開動画であれば基本的に埋め込みやすいですが、限定公開や非公開、埋め込みが許可されていない動画では表示や再生に問題が出ることがあります。自社チャンネルの動画であれば、YouTube Studio側の公開設定や埋め込み許可の状態も確認しておくと安心です。
次に、URLの形式を確認します。共有ボタンから取得した短縮URLではなく、動画ページを開いた状態でブラウザのアドレスバーにあるURLを使うほうが安定しやすいです。再生リスト内の動画を開いている場合は、再生リストの情報がURLに含まれることがあります。まずは動画単体のURLにして、余計な条件を減らしましょう。
時間指定再生をしたい場合も、最初は通常のURLで表示確認をしてから調整します。時間指定やループ再生、自動再生などは便利ですが、複数の条件を一度に加えると、表示されないときに原因が分かりにくくなります。ページ公開前の確認では、別のブラウザやスマホの実機でも再生できるか見ておくと、閲覧者側の見え方に近い状態を確認できます。
STUDIO側でボックスを置く
STUDIO側では、動画を置きたいページを開き、セクション内にEmbedボックスを追加します。配置する場所は、文章の途中に入れるのか、セクション全体の主役として置くのかで変わります。たとえば、動画の前に短い説明文を入れておくと、読者は「なぜこの動画を見るのか」を理解しやすくなります。
Embedボックスを置いたら、設定欄にYouTubeの動画URLを入力します。ここでiframeコードを入れるべきなのか、URLだけでよいのかは、使っているボックスや設定欄の種類によって変わります。YouTube動画用の入力欄であれば、基本は動画ページのURLを入れる考え方で進めます。汎用的なHTML埋め込みを使う場合だけ、YouTube側の埋め込みコードを使う場面があります。
配置後は、横幅と高さを調整します。YouTube動画は横長の比率で表示されることが多いため、横幅だけを広げすぎると高さとのバランスが崩れて見えることがあります。周囲のテキスト、画像、ボタンとの余白も合わせて確認し、動画だけが浮いて見えないように整えましょう。
公開前に見るべき場所
STUDIOのエディタ上で表示されていても、公開ページで同じように見えるとは限りません。プレビューと公開URLの両方で確認し、PCだけでなくスマホでも再生できるかを見ておきましょう。特にスマホでは、画面幅が狭くなるため、動画の左右が切れて見えたり、上下の余白が大きく感じられたりします。
確認するポイントは、動画そのものだけではありません。動画の前後にある見出し、説明文、CTAボタンとの流れも重要です。たとえば、サービス紹介動画の前に「30秒で分かるサービス紹介」と書いておくと、読者は気軽に再生しやすくなります。動画の下に「料金を見る」「相談する」「事例を見る」などの次の導線を置くと、見た後の行動も分かりやすくなります。
また、複数のYouTube動画を同じページに入れる場合は、読み込み速度にも注意が必要です。動画を3本、4本と並べると、ページが重く感じられることがあります。どうしても複数本を見せたい場合は、最重要の動画を1本だけ大きく見せ、残りはリンクやサムネイル風の導線にするなど、ページの軽さと見やすさを優先しましょう。
表示されないときの確認点
STUDIOでYouTubeを埋め込んだのに表示されない場合、原因はいくつかに分かれます。STUDIO側の操作ミスだけでなく、YouTube側の公開設定、URL形式、ブラウザ環境、ネットワーク制限なども関係します。やみくもにボックスを作り直すより、原因を上から順に切り分けたほうが早く解決できます。
まず確認したいのは、URL形式です。短縮URL、再生リスト付きURL、時間指定付きURLなどを使っている場合は、動画単体の通常URLに変えて試します。次に、動画が公開されているか、埋め込みが許可されているかを確認します。自分の動画ではない場合、投稿者側の設定によって外部サイトへの埋め込みが制限されていることがあります。
それでも表示されない場合は、ブラウザや端末を変えて確認します。会社や学校のネットワークではYouTube自体が制限されている場合があり、STUDIOの問題ではないこともあります。自分の環境だけで判断せず、スマホ回線や別ブラウザでも見ておくと原因を切り分けやすくなります。
URL形式が合っていない
最も多い原因のひとつが、URL形式の問題です。YouTubeの共有ボタンからコピーした短縮URLは便利ですが、STUDIOの入力欄によっては正しく読み取れないことがあります。表示されないときは、まずYouTubeの動画ページを通常表示で開き、ブラウザのアドレスバーからURLをコピーし直してください。
また、再生リストの中から動画を開いている場合、URLに再生リスト情報が含まれることがあります。この状態でも表示される場合はありますが、トラブルを避けるなら動画単体のURLにしたほうが安全です。開始時間を指定するパラメータや、共有元を示す余計な文字列も、最初の確認段階では外しておきましょう。
URLを貼り直した後は、STUDIOのプレビューだけでなく公開ページでも確認します。エディタ上の表示と公開後の表示で挙動が違う場合もあるため、公開前のチェックは省かないほうがよいです。特にクライアントワークでは、制作側の環境だけでなく、依頼者が見るスマホでも表示確認してもらうと安心です。
YouTube側の設定に問題がある
URLが正しくても、YouTube側の設定によって埋め込みできない場合があります。動画が非公開になっている場合は、基本的に一般の閲覧者には表示されません。限定公開であっても、外部サイトでの再生や埋め込みの扱いは動画の設定や環境によって見え方が変わるため、公開ページでの確認が必要です。
自社チャンネルの動画であれば、YouTube Studioで公開設定、年齢制限、埋め込み許可、著作権関連の制限を確認します。特に音楽や映像素材を含む動画では、地域や端末によって再生制限がかかることがあります。STUDIO側では正しく埋め込めていても、YouTube側の制限で再生できない場合がある点に注意しましょう。
他人のYouTube動画を埋め込む場合は、後から動画が削除されたり、非公開に変更されたりする可能性もあります。長く使うページに埋め込むなら、自社で管理できる動画を使うほうが安全です。外部動画を参考資料として載せる場合は、表示されなくなったときの代替テキストや説明文も用意しておくと、ページの内容が崩れにくくなります。
スマホだけで崩れる場合
PCではきれいに見えるのにスマホで崩れる場合は、STUDIO側のレスポンシブ設定を見直します。動画の横幅が固定されている、親ボックスの幅が狭い、余白が大きすぎる、セクション内の配置が横並びのままになっているなどが原因になりやすいです。スマホでは動画を横幅いっぱいに近い形で見せるほうが、再生ボタンも押しやすくなります。
テキストと動画を横並びにしているデザインでは、スマホ表示時に縦積みに切り替えるのが基本です。PCでは左に説明文、右に動画という構成が見やすくても、スマホでは横幅が足りず、動画が小さくなりすぎることがあります。STUDIOのブレイクポイントごとに、並び順、余白、幅を調整しましょう。
また、スマホではYouTubeの自動再生が制限される場合があります。PCで自動再生される設定にしていても、スマホでは再生ボタンを押さないと始まらないことがあります。背景動画やファーストビュー動画として使う場合は、スマホで再生されない状態でもページの内容が伝わるように、見出しや静止画の設計をしておくことが大切です。
埋め込み後に整えるコツ
YouTubeをSTUDIOに埋め込めたら、次は「見やすさ」と「行動につながるか」を整えます。動画が表示されるだけでは、ページの成果にはつながりにくいです。読者が動画を見る理由を理解でき、見た後に次の行動へ進める構成にすると、サービス紹介や問い合わせ導線として機能しやすくなります。
特に大切なのは、動画の前後に置く文章です。いきなり動画だけを置くよりも、「どんな内容の動画か」「何分くらいか」「見た後に何が分かるか」を短く添えたほうが再生されやすくなります。長い動画の場合は、ページ上では要点を文章で先に伝え、詳しく知りたい人だけ動画を見る形にすると親切です。
また、YouTube動画はサイト外への導線にもなります。動画を再生したユーザーがYouTube側へ移動することもあるため、ページ内のCTAとの位置関係を考える必要があります。問い合わせや購入につなげたいページでは、動画の下に次のボタンを置くなど、サイト内で行動が完結しやすい流れを作りましょう。
サイズと余白を調整する
動画のサイズは、ページ全体の読みやすさに直結します。大きすぎると動画だけが目立ちすぎ、小さすぎると再生ボタンが押しにくくなります。サービスLPならセクション幅の中で大きめに、ブログ記事なら本文幅に合わせて自然に収めるなど、ページの目的に合わせて調整しましょう。
余白も重要です。動画の直前に見出しが詰まりすぎていると、ページ全体が窮屈に見えます。逆に余白を広げすぎると、動画と説明文の関係が分かりにくくなります。見出し、説明文、動画、CTAボタンがひとつのまとまりに見えるように、上下の余白を整えると見やすくなります。
スマホでは、動画の上下に少し余白を入れると押し間違いを防ぎやすくなります。動画のすぐ下にボタンを置く場合は、誤タップが起きない程度の距離を空けます。PCだけで整えるのではなく、スマホで親指操作をしたときに自然に押せるかまで確認すると、実際の閲覧者に近い判断ができます。
CTAとの流れを作る
YouTube動画を埋め込む目的が問い合わせ、資料請求、予約、購入などにつながる場合は、動画の後に何をしてほしいのかを明確にします。動画を見た読者は、内容に納得した直後に次の行動を取りやすいため、その近くにCTAを置くと流れが自然です。たとえば、採用動画の下に「募集職種を見る」、サービス紹介動画の下に「料金プランを見る」といった導線を用意します。
ただし、動画の前にいきなり強いCTAを置くと、読者がまだ判断材料を持っていない状態で行動を迫られる印象になります。まず短い説明文で動画の内容を示し、動画で理解を深めてもらい、その後にCTAを置く流れが扱いやすいです。問い合わせへの心理的な距離を縮めたい場合は、動画下に「まずは事例を見る」など軽めの導線を置く方法もあります。
また、動画の内容とCTAの内容は一致させたほうがよいです。料金説明の動画を見せた後に採用ページへ誘導すると、読者は違和感を覚えます。店舗紹介動画なら予約、商品紹介動画なら詳細ページ、使い方動画なら購入後サポートや申し込みなど、動画で高まった関心と次の行動をつなげましょう。
ページ速度にも気を配る
YouTube埋め込みは便利ですが、ページに複数入れると読み込みが重くなる場合があります。特にトップページやLPでは、ファーストビュー周辺に重い要素が多いと、最初の表示が遅く感じられることがあります。動画をたくさん見せたい場合でも、ページの目的に本当に必要な動画だけを選ぶことが大切です。
動画を複数置く場合は、優先順位を決めます。最も見てほしい動画を1本だけ目立つ場所に置き、補足動画は下部にまとめる、またはYouTubeチャンネルへの導線にするなどの整理ができます。事例紹介ページでは、各事例に動画を入れるより、代表的な事例動画を1本置いたほうがページ全体の見やすさが保たれることもあります。
また、動画の内容が文章で代替できるなら、要点を本文に書いておくと親切です。動画を見られない環境の人、音を出せない人、通信量を気にする人もいます。YouTubeを埋め込むだけでなく、周囲のテキストで要点を補うことで、動画を見ない読者にも内容が伝わりやすくなります。
自分のページで試す流れ
STUDIOでYouTubeを埋め込むなら、まずは通常ページにEmbedボックスを置き、YouTubeの動画ページURLを入れて表示確認するところから始めるのが分かりやすいです。動画ボックスは直接アップロードしたmp4やwebm向けの機能なので、YouTubeを載せたいだけなら最初に選ぶ機能ではありません。CMS記事や背景動画で使う場合は、通常ページよりも表示場所や制限を意識して設定しましょう。
実際に作業するときは、次の順番で進めると失敗しにくいです。
- 動画の目的を決める
- 通常ページ、CMS記事、背景動画のどれに置くか決める
- YouTubeの通常URLをコピーする
- STUDIOのEmbedボックスに設定する
- PCとスマホで表示を確認する
- 動画の前後に説明文とCTAを置く
- 表示されない場合はURL形式とYouTube側の設定を見直す
STUDIOでのYouTube埋め込みは、手順そのものよりも「どこに、何のために置くか」で成果が変わります。サービス紹介なら理解を深める位置に、採用動画なら応募導線の近くに、ブログ記事なら本文の補足として置くと自然です。表示できた時点で終わりにせず、スマホで見やすいか、動画を見た後に次の行動が分かるかまで確認しておくと、ページ全体の完成度が上がります。
