ノーコードサイトにYouTube動画を埋め込む基本——手順・スマホでの見え方・自動再生の注意点
会社や店舗の紹介、商品の使い方、お客さまの声——動画を見せたいとき、いちばん手軽なのは、YouTubeにアップロードした動画をホームページに「埋め込む」方法です。動画のファイルそのものを自分のサイトに置くのではなく、YouTubeの再生画面を、サイトの中に窓のように表示するイメージです。
この記事では、埋め込みコードの取り方から、ノーコードサイト（Studioを例にします）への置き方、画面サイズに合わせたときの比率、自動再生や開始位置の設定、つまずきやすい点までを順に整理します。
動画を載せる方法は大きく2つある
ノーコードサイトで動画を見せる方法は、「YouTubeやVimeoなどの動画を埋め込む」か、「動画ファイルを直接アップロードする」かの2つです。Studioの公式ヘルプによると、動画ファイル（mp4・webm）は1ファイルあたり1GBまで直接アップロードでき、1GBを超える動画はYouTubeやVimeoの埋め込みが案内されています。
| 方法 | 特徴 | 向いている場面 |
|---|---|---|
| YouTubeを埋め込む | 動画の保存・配信はYouTube側が行う。URLを貼るだけで置ける | 長い説明動画、すでにYouTubeに公開している動画 |
| 動画ファイルをアップロード | サイトの中で完結する。容量は1ファイル1GBまで（Studioの公式ヘルプ） | 短い動画、背景に流す動画、YouTubeの画面を出したくない場面 |
YouTube側で、埋め込みの準備をする
まずはYouTubeの動画ページで、埋め込みに使うURLかコードを用意します。YouTubeヘルプで案内されている基本の流れは次のとおりです。
- 埋め込みたい動画のページを開く
- 動画の下の「共有」をクリックする
- 「埋め込む」を選び、表示されたHTMLコード（iframeのコード）をコピーする
ノーコードサイトに置く（Studioの例）
Studioには、専用の「YouTube」ボックスがあります。左の「追加」から置けます。置いたあとの設定は、右側のパネルにある「埋め込み」タブで行います。
- YouTubeで動画を開き、ブラウザのアドレスバーにある「https://www.youtube.com/watch?v=…」の形のURLをコピーする
- Studioの左側の「追加」を開き、「基本」タブの「埋め込み」にある「YouTube」をクリックして、ページに置く
- 置いたボックスを選び、右側の「埋め込み」タブを開く
- 「動画URL」の欄にコピーしたURLを貼る
- 「ボックス」タブで幅と高さを確かめる（置いた直後は、幅480px・高さ270px）
- プレビューで、パソコンとスマホの両方の画面で再生できるか確かめてから、サイトを更新（公開）する
Studioの埋め込みボックスは、無料プランを含むすべてのプランで使えると、公式ヘルプで案内されています。ボックスの種類全体はStudioのボックスの種類と使い分けにまとめています。地図の埋め込みも同じ考え方で置けます（ノーコードサイトにGoogleマップを埋め込むときの基本）。
画面サイズに合わせる——比率は16:9を保つ
YouTubeの動画は、基本的に横16：縦9の長方形です。置いたボックスの幅だけを変えて高さを変えないと、動画の上下か左右に黒い余白が出たり、見切れたりします。幅を変えるときは、高さも「幅×9÷16」にそろえます。
| 幅（px） | 高さ（px） | メモ |
|---|---|---|
| 640 | 360 | パソコンの画面で大きく見せたいとき |
| 560 | 315 | YouTubeの「埋め込む」で出てくるコードの初期サイズ |
| 480 | 270 | Studioでボックスを置いた直後のサイズ |
| 360 | 203 | スマホの画面で、左右に少し余白を残したいとき（202.5を切り上げ） |
| 320 | 180 | 小さめのスマホ画面でも収めたいとき |
幅をパーセントで指定して画面幅に追従させたい場合は、高さも一緒に追従させる工夫が必要です。Studioの公式ヘルプには、埋め込みボックスの縦横比を保つ設定の手順（旧エディタ向けの記事）があります。現在の画面で同じ手順が使えるかは、お使いの環境で確かめてください。画面幅に合わせた設計の考え方はStudioのレスポンシブ設定で崩れにくくする4つの設計にまとめています。
自動再生・開始位置・字幕を設定する
YouTubeヘルプでは、埋め込みコードのURLの末尾に「パラメータ」と呼ばれる指定を足すことで、動作を変えられると案内されています。Studioでは、YouTubeボックスの「埋め込み」タブにある「埋め込みコード」の「エディタを開く」から、コードを貼り替えて設定します。
| 書き足すもの | 意味 | 例 |
|---|---|---|
| start=秒数 | 動画の途中から再生を始める（「?」のあと、または「&」でつなぐ） | start=30（30秒の位置から） |
| autoplay=1 | 自動で再生を始める。ただし、ブラウザ側に止められることがある（次の項目） | autoplay=1 |
| cc_load_policy=1 | 字幕を最初から表示する | cc_load_policy=1 |
| youtube-nocookie.com | アドレスの「www.youtube.com」を置き換えると、プライバシー強化モードで埋め込める（YouTubeヘルプでは、サイトに埋め込んだプレーヤーでのみ使えると案内） | https://www.youtube-nocookie.com/embed/動画ID |
https://www.youtube.com/embed/動画ID?start=30&cc_load_policy=1載せるときの考え方
- ファーストビュー（最初に見える範囲）に動画を置くと、読み込みが重く感じられることがある。最初に見せたい理由が無ければ、ページの途中に置く
- 1ページに何本も置かず、見せたい動画に絞る。数が増えるほど、外部のサービスから読み込む量も増える。表示速度の見方はノーコードサイトの表示速度、PageSpeed Insightsの数字をどう読むかにまとめています
- 動画の前後に、何の動画かを伝える短い文章を添える。動画だけでは、見ずに離れる人に内容が伝わらない
- 音声が重要な動画には、字幕もつける。音を出せない場所で見る人にも届く
よくある質問
| 質問 | 答え |
|---|---|
| 動画が表示されず、エラーのような画面になります。 | 動画の公開設定で「埋め込みを許可する」がオフになっていないか、非公開動画ではないかを確認する。Studioの場合は、URLが「youtu.be」の短い形になっていないかも確かめる。 |
| 公開したあとで動画を差し替えたいです。 | 動画URLを新しいものに変えて、サイトを更新（公開）し直す。Studioの公式ヘルプでも、公開済みサイトで編集したときは更新が必要と案内されている。 |
| スマホで、動画の横に余白ができたり、はみ出したりします。 | 幅と高さの組み合わせが16:9になっているか確認する。画面に合わせて幅を変えた箇所は、高さも変える。プレビューで、パソコンとスマホの両方を見る。 |
| 背景として動画を流したいです。 | Studioの公式ヘルプには、動画ファイルを置く「動画ボックス」や、埋め込んだ動画を背景にする方法の案内がある。どの方法でも、自動再生はブラウザに止められることがある前提で考える。 |
| 埋め込みに料金はかかりますか？ | Studioの埋め込みボックスは、無料プランを含むすべてのプランで使えると、公式ヘルプで案内されている。YouTube側の埋め込みについての料金は、YouTubeの最新の案内を確認する。 |
まとめ
YouTube動画の埋め込みは、「YouTubeで埋め込みを許可しているか確認する」→「StudioのYouTubeボックスに、watch?v=…のURLを貼る」→「幅と高さを16:9にそろえる」→「パソコンとスマホで再生を確かめる」の順で進められます。自動再生は止められることがある前提で、見る人が自分で再生できる形にしておくと安全です。
動画のあとに、問い合わせや予約への導線を置くと、見て終わりになりません。設置前の確認はノーコードサイトに問い合わせフォームを設置するときに確認しておきたいことにまとめています。
生成AIで作ったHTML/CSSを、Studioへ。
SHITAJIは、HTML/CSSのサイトをStudioのネイティブ要素として取り込む変換ツールです。 フリープランは月3ページまで無料・カード登録不要で試せます。
次に読む
2026-10-03ノーコードサイトにLINE公式アカウントの友だち追加ボタンを置く方法——リンクの取得から設置まで2026-09-27ノーコードサイトに「保護されていない通信」と表示される原因——独自ドメインをつないだ後に確認すること※ SHITAJIはStudio株式会社とは関係のない独立したサービスです。「Studio」はStudio株式会社の商標です。 本記事は公開されている情報と一般的な制作の知見にもとづいて執筆しています。