せっかく撮った紹介動画をホームページにも載せたいんです。でも、どう貼ればいいのか、ページが重くならないかも心配で。
貼り方より先に「どこに置くか」なんですよ。そこが決まると、あとはだいたい迷わなくなります。
SNS用に撮った動画や会社紹介の映像を、ホームページにも載せたい。そう考えたとき、最初に引っかかるのは「どうやって貼るのか」です。ファイルをそのまま上げるのか、YouTubeのリンクを貼るのか、制作会社に聞いても答えがばらばらに聞こえることがあります。
答えの要点は、動画の置き場所を先に決めることです。大きく分けると、YouTubeに置いてサイトに埋め込む方法と、サイトのサーバーに動画ファイルを直接置く方法の2つ。説明として見てもらう動画は前者、写真の代わりに背景で流す短い映像は後者が向きます。
この記事では、2つの置き場所の違い、それぞれで確かめること、ページのどの位置に置くか、載せる前の確かめ方を順に書きます。表示速度全体の話は別の記事にまとめているので、ここでは動画の載せ方に絞ります。
この記事の要点
- 置き場所はYouTube埋め込みとサーバー直置きの2つ
- 説明の動画は埋め込み、背景の短い映像は直置き
- 位置は「その動画で答えたい疑問」の隣
置き場所は2つ。動画の役目で選ぶ
まず、2つの置き場所を並べます。
| YouTubeに置いて埋め込む | サーバーに直接置く | |
|---|---|---|
| 向く動画 | 会社紹介、使い方の説明、インタビューなど音声で伝えるもの | 背景で流す数秒〜十数秒の映像、音のない雰囲気づくり |
| 再生の負担 | YouTube側が受け持つ | 自社のサーバーが受け持つ |
| 見た目 | YouTubeの再生画面がそのまま入る | 枠やボタンを出さず、写真のように見せられる |
| 自由度 | 再生画面の細かい表示は決められない | 再生・停止の動きまで自分で決められる |
| 他でも使えるか | チャンネルでも見られ、検索にも出る | サイトの中だけ |
判断の軸は、その動画が「見てもらうもの」か「流しておくもの」かです。例えば工務店の会社紹介なら、社長の話をちゃんと聞いてほしいので埋め込み。トップページの最初に、職人の手元をゆっくり映す8秒の映像を写真の代わりに置くなら、直置きが向きます。
長い動画をサーバーに直接置くのは避けたほうが無難です。数分ある動画を何人もが同時に見ると、そのぶんのデータを自社のサーバーが送ることになり、契約しているサーバーによっては転送量の上限にかかります。音声つきの説明はYouTubeに任せる、と覚えておくと迷いません。
YouTubeに置いて埋め込むときに確かめること
埋め込みのコードは、YouTubeの動画の「共有」から「埋め込む」を選ぶと出てきます。これをサイトの編集画面の、HTMLを貼れる場所に入れれば表示されます。WordPressなら、動画のURLを貼るだけで埋め込まれることも多いです。
貼る前に確かめておきたいのは次の4つです。
- 公開範囲：チャンネルに並べたくない動画は「限定公開」にしても埋め込めます。ただしURLを知っている人は誰でも見られる状態なので、社外に出したくない内容は載せない
- 埋め込みの許可：動画の詳細設定で埋め込みが許可されているか。外していると、サイト上で再生できない
- 再生後の画面：埋め込んだ動画はYouTubeの再生画面そのものなので、終わったあとの表示などをこちらで細かく決めることはできない
- Cookieの扱い：YouTubeの埋め込みオプションには「プライバシー強化モード」があります。サイトのプライバシーポリシーで外部サービスの扱いを書いている会社は、どちらを使うかを決めておく
限定公開の使いどころは、営業での使い方をまとめた記事でも触れています。
あわせて読みたいYouTubeの限定公開を営業に使う｜送る場面と送る前の確認もう1つ、見落としやすいのが動画のサムネイルです。埋め込むと、再生前はYouTubeのサムネイルが表示されます。チャンネル向けに文字を大きく入れたサムネイルが、サイトの落ち着いたデザインの中で浮いてしまうことがあります。サイトに載せる動画は、サムネイルもサイトの中で見て決めてください。
サーバーに直接置くときは、音なしで流す前提
背景で流す映像をサーバーに直接置く場合、いちばん多い相談が「音つきで自動再生したい」です。
音つきで自動再生したいって相談、多いんです。でもブラウザの側が止めちゃうんですよね。こっちのせいじゃないのに。
Chromeの開発者向けの説明では、音を消した状態の自動再生は常に許可され、音つきの自動再生は条件つきとされています。iPhoneのSafariでも、音を消した動画は操作なしで自動再生できるという方針が、WebKitの公式ブログで示されています（2026年10月時点で確認できた範囲）。つまり、自動で流すなら音なしが前提です。
直置きの背景動画では、次をそろえておきます。
- 01音を消す自動再生は muted（消音）を付けて組む
- 02画面の中で再生するplaysinline を付けて、iPhoneで全画面に切り替わらないようにする
- 03最初の1枚を決める読み込み前や再生できないときに出す静止画（poster）を用意する
- 04止められるようにする動き続けるものには停止ボタンを置く
- 05短く軽く数秒〜十数秒をループさせ、書き出しは軽めに
最初の1枚は、思った以上に人の目に触れます。通信が遅い場所や省電力の設定によっては、動画ではなくこの1枚のまま見られることもあるからです。動画が止まっていても会社の雰囲気が伝わる1枚を選んでください。
書き出しの設定は、SNS用とは別に考えます。SNSに出した縦の動画をそのまま背景に流すと、パソコンの横長の画面で上下が大きく切れます。解像度や形式の考え方は、書き出しの記事にまとめています。
あわせて読みたい動画の書き出し設定の決め方。SNS用の解像度・フレームレートと画質落ちの防ぎ方ページのどこに置くか
置き場所が決まったら、次はページの中の位置です。決め方は1つで、その動画で答えたい疑問の隣に置きます。
| 動画の中身 | 置く位置 |
|---|---|
| 会社や店の雰囲気（背景映像） | トップの最初の画面 |
| サービスの流れ・使い方 | 流れを文字で説明している段落の横 |
| お客様のインタビュー | お客様の声のところ |
| 職場の様子・社員の話 | 採用ページの仕事内容の近く |
| よくある質問への答え | FAQの該当する問いの下 |
例えば駅前の整骨院なら、施術の流れを説明する動画は「初めての方へ」の段落の中に置きます。トップにまとめて並べるより、「どんなことをされるんだろう」と思った瞬間に目に入るほうが再生されます。
テレビみたいに流しっぱなしにしても、サイトだと誰も見てないことが多いんですよ。置く場所で見られ方がぜんぜん違います。
もう1つは、動画の前後に文字で要点を書いておくことです。会社やお店で音を出せない人、通信量を気にして再生しない人もいます。動画を見なくても話が分かるように、動画で言っていることの要点を2〜3行で添えておきます。動画は、その文字を信じてもらうための裏づけの役です。
1ページに何本も埋め込むと、どれを見ればいいか分からなくなります。1つの段落に1本を目安にして、ほかは動画をまとめたページかYouTubeのチャンネルへ案内するほうが、選ぶ手間が減ります。
載せたあとの確かめ方
動画を載せたら、公開する前に自分のスマホで確かめます。パソコンの画面で問題がなくても、スマホで崩れていることは珍しくありません。
- Wi-Fiを切って、モバイル通信で開いてみる。最初の1枚が出るまでの様子を見る
- iPhoneとAndroidの両方で、背景動画が画面の中で流れるか、全画面に切り替わらないか
- 音を消した状態で、ページの話が通じるか
- 埋め込み動画の枠が画面の幅に収まっているか。横にはみ出していないか
- 動画の上に重ねた文字が、明るい場面でも読めるか
ページ全体が重いと感じたときは、動画以外にも原因があることが多いです。表示が遅いときの見直し方は、表示が遅いサイトの記事で順番にまとめています。
HEART CREATIONがお手伝いできること
当社は、縦型動画の企画・撮影・編集と、WEB・LP制作を同じチームで引き受けています。動画を撮る段階から、サイトのどこに置くかまで決めて作れます。
- サイトに載せる動画の企画・撮影・編集（背景用の短い映像と、説明用の動画の作り分け）
- 動画を載せる位置まで含めたページの設計と制作
- SNS用に撮った動画を、サイトでも使える形に整えること
「手元にある動画を、どこに載せればいいか分からない」という段階でもかまいません。初回のご相談は無料で、オンラインでもお受けしています。サービスの全体はこちらにまとめています。
手元の動画、まずは見せてもらえたら。載せる場所、一緒に考えましょう。
よくある質問
ホームページに動画を載せるなら、YouTubeとファイルの直接アップロードのどちらがいいですか？
音声で説明する動画や数分ある動画は、YouTubeに置いて埋め込むのが向きます。背景で流す短い映像は、サーバーに直接置くと写真のように見せられます。動画の役目で選んでください。
背景動画がiPhoneで自動再生されないのはなぜですか？
音を消す設定（muted）と、画面の中で再生する設定（playsinline）がそろっていないことがよくある原因です。省電力の設定などで再生されない場合もあるので、代わりに出す静止画を用意しておくと安心です。
YouTubeの限定公開の動画はホームページに埋め込めますか？
埋め込めます。ただし、埋め込んだページを見た人や、URLを知った人は誰でも再生できます。社外に出したくない内容の動画には使わないでください。
埋め込んだYouTube動画がサイトで再生できないのはなぜですか？
動画の詳細設定で埋め込みが許可されていない、動画が非公開になっている、といったことがよくある原因です。まずYouTube Studioでその動画の公開範囲と埋め込みの設定を確かめてください。
