ホームページに動画を載せる方法｜埋め込みと直接置く場合の違い
会社の紹介動画、仕事の様子、製品の使い方、工事の記録など、動画は文章と写真だけでは伝わりにくいものを伝えられます。一方で、載せ方を間違えると、ページが重くなる、スマートフォンで再生されない、関連動画にほかの会社の動画が出る、といった困りごとが起きます。
この記事では、ホームページに動画を載せる2つの方法（YouTube などの埋め込みと、動画のファイルを直接置く方法）の違い、重くしない工夫、トップページの背景に動画を流すときの決まり、載せる前の権利の確認をまとめます。ブラウザや YouTube の仕様は、2026年10月時点で各社が公開している資料によります。
動画を載せる2つの方法
| YouTube などに上げて埋め込む | 動画のファイルをサイトに直接置く | |
|---|---|---|
| 仕組み | 動画は YouTube に置き、サイトには再生の枠だけを置く | 動画のファイル（MP4 など）をサイトのサーバーに置く |
| サーバーの負担 | ほぼかからない | 見られるたびにサーバーから配信する |
| 再生の画質 | 回線に合わせて自動で切り替わる | 置いたファイルの画質のまま |
| 見た目 | YouTube の再生画面とロゴが出る | 再生ボタンなどを自由に作れる |
| 終わった後 | 関連動画が出る | 何も出ない（最初の画面に戻すなどを決められる） |
| 向いているもの | 音声付きの紹介動画・説明動画（数分） | トップページの背景の短い映像、製品の短い動き |
迷ったら、音声付きで長い動画は埋め込み、音なしで短い映像は直接置く、と分けると大きくは外しません。直接置く方法で数分の動画を配信すると、ファイルが大きく、レンタルサーバーによっては転送量の上限にかかることもあります。
YouTube の埋め込みで確かめること
YouTube の動画は、パソコンで動画を開き、「共有」から「埋め込む」を選ぶと表示されるコードを、ページに貼り付けて載せます（YouTube ヘルプによる）。WordPress などの CMS では、動画の URL を貼るだけで埋め込みになることもあります。埋め込むときは、次の点を確かめます。
関連動画の出方
YouTube の開発者向けの案内では、2018年9月25日以降、再生の後に出る関連動画を完全に消すことはできなくなりました。関連動画を絞る設定（rel=0）をしても、同じチャンネルの動画が出る形です。会社のチャンネルに、見られて困る動画や古い動画が残っていないかを整えておきます。
プライバシー強化モード
YouTube ヘルプでは、埋め込みのコードの「youtube.com」の部分を「youtube-nocookie.com」に変えると、プライバシー強化モードになると案内されています。このモードでは、埋め込みの動画を見たことが、その人の YouTube のおすすめなどに使われなくなるとされています。サイトのプライバシーポリシーで、動画の埋め込みに外部のサービスを使っていることも書いておくと丁寧です（書き方はホームページのプライバシーポリシーの書き方）。
自社のアカウントで上げる
動画は、制作会社や担当者個人のアカウントではなく、会社のアカウントで上げます。担当者が辞めたり制作会社を変えたりしたときに、動画を直せない・消せないという事態を避けるためです。ドメインやサーバーと同じ考え方で、名義の話はドメインとサーバーは誰の名義にすべきかにまとめています。
埋め込みが許可されているか
YouTube では、動画の持ち主が「埋め込みを許可する」をオフにできます。ほかの会社が作った動画（取引先の製品の紹介など）を載せたいときは、埋め込みが許可されているかと、載せてよいかを持ち主に確かめます。
動画が重いときの工夫
動画のせいでページが重くなるのは、主に次のような場合です。
- 直接置いた動画のファイルが大きい：撮ったままの4K の動画などを置いている
- ページを開いた時点で、動画を読み込み始める：見られるかどうかに関係なく読み込んでいる
- 1ページに埋め込みをたくさん並べている：埋め込み1つごとに再生の仕組みを読み込む
それぞれ次のように軽くします。
| 原因 | 工夫 |
|---|---|
| 直接置いた動画が大きい | 表示する大きさに合わせて解像度を下げる（背景なら横1,280〜1,920px程度）。音のトラックを外す。長さを短くする（背景なら十数秒程度でくり返す） |
| 開いた時点で読み込む | 最初は静止画（サムネイル）だけを表示し、押されたら動画を読み込む作りにする |
| 埋め込みが多い | 1ページの動画は絞り、一覧には静止画を並べ、動画は個別のページに置く |
Google 検索のスターターガイドでも、動画は独立したページに埋め込み、関連する文章の近くに置くことが勧められています。動画のページには、何の動画かを文章でも書いておきます。
トップページの背景に動画を流すとき
トップページの最初の画面に、音のない映像をくり返し流すデザインがあります。このときは、ブラウザの自動再生の決まりと、見る人への配慮の両方を考えます。
自動再生は「音なし」が前提
Chrome の自動再生の決まりでは、音を消した自動再生は常に許可されています。音の出る自動再生は、その人がサイトを操作した後など、条件を満たすときだけです。iPhone の Safari も、音を消した動画の自動再生を許可しています（WebKit の案内）。背景の動画は音のトラックを外すか、消音の指定を付けます。iPhone では画面の中で再生する指定（playsinline）がないと、全画面で開いてしまうことがあるので、制作会社に確かめます。
止める手段を付ける
ウェブのアクセシビリティ（障害のある人や高齢の人を含め、誰もが使えるようにすること）の国際的な基準 WCAG 2.2 では、自動で始まり、5秒より長く続き、ほかの内容と並んで表示される動きには、止める・隠す手段を用意することが求められています（達成基準 2.2.2、レベル A）。背景に動画を流すなら、止めるボタンを付けます。
動画が無くても伝わるようにする
背景の動画は、通信の状態や端末の設定で再生されないことがあります。動画の上に載せる見出しやボタンは、動画が無くても読めるように、明るさの差を確保します。最初の1枚の静止画（ポスター画像）も用意しておきます。
載せる前の権利の確認
動画には、写っている人・音楽・映像の素材など、いくつもの権利が関わります。
- 写っている社員やお客様に、サイトに載せることの了解を取った
- BGM は、ウェブで使うことが許された音楽か（素材の利用規約の範囲か）を確かめた
- ほかの人が撮った映像や写真を使う場合、使ってよい範囲を確かめた
- 制作会社に作ってもらった動画なら、サイトや SNS で使える範囲を契約で確かめた
- 音声で話している内容に、字幕や文章の説明を付けた
制作会社に作ってもらったものの権利の考え方は、ホームページ制作の契約書で確かめることにまとめています。写真の権利の考え方は素材写真の使い方と注意点も参考になります。
まとめ
音声付きで長い紹介動画は YouTube などに会社のアカウントで上げて埋め込み、トップページの背景のような音なしの短い映像は、軽くしたファイルを直接置きます。埋め込みでは関連動画とプライバシー強化モードを、背景の動画では音なしの自動再生・止めるボタン・動画が無くても伝わる作りを確かめてください。
Lapisデザインラボでは、ホームページの制作の中で、動画の置き方もあわせてご相談いただけます。内容は料金プランをご覧ください。
よくある質問
ホームページに動画を載せるなら、YouTubeの埋め込みと直接置くのはどちらがよいですか。
音声付きで数分ある紹介動画なら、YouTubeなどに上げて埋め込むほうが手軽です。動画の配信はYouTube側が受け持つので、サイトのサーバーに負担がかかりません。トップページの背景に流す数秒〜十数秒の音なしの映像なら、短く軽いファイルをサイトに直接置く方法が向いています。
YouTubeを埋め込むと、関連動画にほかの会社の動画が出ませんか。
YouTubeの開発者向けの案内では、2018年9月25日以降、関連動画を完全に消すことはできず、設定（rel=0）をしても同じチャンネルの動画が出る形になったとされています。自社のチャンネルの動画を整えておくと、ほかの会社の動画が出る心配は減ります。
トップページの背景に動画を自動で流しても問題ありませんか。
音を消した状態なら、主なブラウザで自動再生が許可されています。ただ、ウェブのアクセシビリティの国際的な基準（WCAG 2.2）では、自動で始まり5秒より長く続く動きには、止める・隠す手段を用意することが求められています。止めるボタンを付け、動画が見られない環境でも内容が伝わるように作ります。