---
title: "動画を埋め込んだHTMLを共有する方法｜サーバー不要で相手に見せる手順"
description: "動画入りのHTMLを相手にそのまま見せたいがサーバーを立てたくない方向け。埋め込みの種類ごとの違いと、共有URLで届けるまでの流れをステップごとに確認できます。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/share-html-with-video"
markdown: "https://giga-site.com/articles/share-html-with-video/index.md"
category: "ハウツー"
publishedAt: "2026-06-21"
updatedAt: "2026-06-25"
readingMinutes: 6
---
# 動画を埋め込んだHTMLを共有する方法｜サーバー不要で相手に見せる手順
作った動画入りのHTMLを、メールやチャットで相手にそのまま見せたい。そんなときは「埋め込みの種類」と「公開のしかた」を分けて考えると迷いません。この記事では動画を埋め込む2つの方法と、サーバーを立てずに共有URLで届けるまでの流れを説明します。
> Source HTML: https://giga-site.com/articles/share-html-with-video
> Article index: https://giga-site.com/articles/index.md
## 動画を埋め込んだHTMLを共有するときに最初に決めること
動画入りのHTMLを相手に見せたいとき、つまずきがちなのは「動画の埋め込み方」と「ページの届け方」を一緒くたに考えてしまうことです。この2つは別の問題なので、分けて整理すると一気に見通しがよくなります。
埋め込み方は大きく2通りあります。YouTubeやVimeoなどの動画を「iframe」で読み込む方法と、手元の動画ファイル(mp4など)をHTMLの中で直接再生する方法です。前者は再生負荷を動画サービス側が担い、後者は動画ファイルそのものを相手に届ける必要がある、という違いがあります。
届け方については、HTMLファイルを単にメールに添付しても、受け取った相手の環境では動画やレイアウトが崩れて正しく再生されないことがよくあります。きちんと見せるには、ブラウザでそのまま開けるURLとして公開するのが確実です。
## 埋め込み方は2種類、それぞれの注意点
まずは自分のページがどちらの方式かを確認しましょう。配信サービスの動画を使うのか、自前の動画ファイルを使うのかで、共有時に気をつける点が変わります。
どちらの方式でも共通して重要なのが「相対パス」です。動画や画像を「videos/intro.mp4」のような相対パスで読み込んでおけば、フォルダごと一式で公開したときにリンクが切れにくくなります。逆に自分のPC内だけを指すパス(file:///から始まるものなど)を書いていると、相手の画面では再生されません。
- YouTube/Vimeo埋め込み: iframeのsrcに正しい埋め込み用URLを指定する
- 動画ファイル直置き: videoタグで参照し、mp4などブラウザ対応の形式を使う
- ファイル直置きはサイズが大きくなりがちなので、画質と容量のバランスを確認する
- パスは相対パスで書き、動画・画像・HTMLを同じ構成のまま一式で扱う
## 最短手順：まずこの3ステップで完了
動画を埋め込んだHTMLを共有は、最初に全体像を押さえると迷いません。細かな設定に入る前に、ファイルを準備し、共有条件を決め、公開後に相手と同じURLで確認する流れを作ります。
手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。
- 1. 共有するHTML/ZIPを整理し、不要ファイルや秘密情報を除く
- 2. 認証方式、公開期限、差し替え有無を決めてURLを発行する
- 3. シークレットウィンドウとスマホで開き、相手への依頼文を添えて送る
## 添付ファイルではうまく見せられない理由
HTMLファイルを直接メールやチャットで送ると、相手は二度手間になりがちです。ダウンロードして開く必要があり、複数ファイルに分かれていると関連付けが崩れて動画が表示されないことも珍しくありません。
とくに動画ファイルを同梱したZIPは容量が大きく、送信制限に引っかかったり、相手のフォルダ構成が変わってリンクが切れたりします。結局「見られませんでした」という返信が来て、やり直しになることもあります。
この手間を解消するのが、ブラウザで開くだけの共有URLです。相手はクリックするだけで、動画もレイアウトも作ったとおりに確認できます。
## ギガサイト便で動画入りHTMLを共有する手順
ここからは、サーバーを立てずに動画入りのHTMLを共有URLとして公開する具体的な流れを紹介します。HTML単体でも、動画や画像をまとめたZIP(HTML/CSS/JS/画像一式)でも公開できます。
公開後も同じURLのままファイルを差し替えられるので、動画を入れ替えたり微修正したりしても、リンクを送り直す必要はありません。
1. トップページに、動画を含むHTMLファイル、または一式をまとめたZIPをドロップする
2. ZIPの場合は中の相対パスが崩れていないかを確認する(動画・画像が同じ構成で入っているか)
3. アップロード時のセキュリティスキャンの警告を確認する(外部スクリプト依存などが検出されることがある)
4. 誰に見せるかに応じて認証方式(URLのみ・パスワード・メール認証・会社ドメイン認証)を選ぶ
5. 必要なら公開期限を設定し、発行された共有URLを相手に送る
## 見せる相手に合わせて公開設定を選ぶ
動画には公開前の素材や社外秘の内容が含まれることもあります。誰に見せるかを設定で選べると安心です。リンクを知っている人だけに見せるなら「URLのみ」、特定の相手に限定するなら「パスワード認証」や、指定したメール宛のワンタイムで本人確認する「メール認証」が使えます。社内レビューでは「会社ドメイン認証」で、指定ドメインのメールを持つ人だけに絞れます。
公開期限を設定しておけば、期限切れで自動的に閲覧できなくなります。レビュー期間が終わったあとに動画がいつまでも見られる状態を避けたいときに役立ちます。また、一時公開のページにはnoindexが付くため通常は検索結果に出ませんが、noindex自体はアクセス制御ではない点に注意してください。本当に見せたくない相手をブロックするには、パスワードやドメインなどの認証を併用します。
公開後はアクセスログを確認でき、共有URLの末尾(スラッグ)を編集してわかりやすいURLにすることもできます。
## よくある質問
### 動画を埋め込んだHTMLをメールに添付して送れますか
添付自体は可能ですが、相手の環境では動画やレイアウトが崩れて再生できないことがよくあります。複数ファイルやZIPは容量も大きくなりがちです。ブラウザで開くだけの共有URLとして公開するほうが、作ったとおりに見てもらえて確実です。
### YouTube埋め込みと動画ファイル直置きはどちらが共有向きですか
配信サービスの動画をiframeで埋め込む方式は、再生負荷を動画サービス側が担うため軽く扱えます。手元のmp4などを直置きする方式は容量が大きくなりがちです。どちらの場合も、動画と画像を相対パスで参照し、HTMLと一式で公開するとリンク切れを防げます。
### 公開した動画ページは検索結果に出ますか
一時公開のページにはnoindexが付くため、通常は検索結果に表示されません。ただしnoindexはアクセス制御ではないので、特定の人だけに見せたい場合はパスワード認証やメール認証、会社ドメイン認証を併用してください。
### 公開後に動画を差し替えたいときはどうすればよいですか
同じURLのままファイルを差し替えられるため、動画の入れ替えや修正をしてもリンクを送り直す必要はありません。相手は同じURLにアクセスするだけで最新の内容を確認できます。
### 最短で進める場合でも省略しないほうがよい確認は何ですか？
不要ファイルや秘密情報の除去、スマホ表示確認、共有相手と期限の明記は省略しないほうが安全です。URLを作る速さより、誤共有を防ぐことを優先します。
## 関連記事
- [サーバーを借りずにHTMLを公開する方法](https://giga-site.com/articles/serverless-html-publish/index.md)
- [3秒でHTMLを共有する最短手順｜登録不要でURL発行](https://giga-site.com/articles/quick-html-share-3-seconds/index.md)
- [Webフォント入りHTMLを崩さず共有する方法](https://giga-site.com/articles/share-html-with-fonts/index.md)
- [パスワード保護した共有URLをQRで渡すときのパスワードの伝え方](https://giga-site.com/articles/qr-with-password-handover/index.md)
- [公開URLに有効期限を設定して確認用ページを自動で閉じる方法](https://giga-site.com/articles/set-link-expiry/index.md)
- [同じURLのままHTMLを差し替える方法 - リンクを送り直さず中身だけ更新する](https://giga-site.com/articles/replace-html-same-url/index.md)
```json
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "動画を埋め込んだHTMLを共有する方法｜サーバー不要で相手に見せる手順",
"description": "動画入りのHTMLを相手にそのまま見せたいがサーバーを立てたくない方向け。埋め込みの種類ごとの違いと、共有URLで届けるまでの流れをステップごとに確認できます。",
"datePublished": "2026-06-21",
"dateModified": "2026-06-25",
"mainEntityOfPage": "https://giga-site.com/articles/share-html-with-video",
"url": "https://giga-site.com/articles/share-html-with-video",
"inLanguage": "ja",
"image": "https://giga-site.com/og-image.png",
"articleSection": "ハウツー",
"author": {
"@type": "Organization",
"name": "ギガサイト便"
},
"publisher": {
"@type": "Organization",
"name": "ギガサイト便"
},
"mainEntity": [
{
"@type": "Question",
"name": "動画を埋め込んだHTMLをメールに添付して送れますか",
"acceptedAnswer": {
"@type": "Answer",
"text": "添付自体は可能ですが、相手の環境では動画やレイアウトが崩れて再生できないことがよくあります。複数ファイルやZIPは容量も大きくなりがちです。ブラウザで開くだけの共有URLとして公開するほうが、作ったとおりに見てもらえて確実です。"
}
},
{
"@type": "Question",
"name": "YouTube埋め込みと動画ファイル直置きはどちらが共有向きですか",
"acceptedAnswer": {
"@type": "Answer",
"text": "配信サービスの動画をiframeで埋め込む方式は、再生負荷を動画サービス側が担うため軽く扱えます。手元のmp4などを直置きする方式は容量が大きくなりがちです。どちらの場合も、動画と画像を相対パスで参照し、HTMLと一式で公開するとリンク切れを防げます。"
}
},
{
"@type": "Question",
"name": "公開した動画ページは検索結果に出ますか",
"acceptedAnswer": {
"@type": "Answer",
"text": "一時公開のページにはnoindexが付くため、通常は検索結果に表示されません。ただしnoindexはアクセス制御ではないので、特定の人だけに見せたい場合はパスワード認証やメール認証、会社ドメイン認証を併用してください。"
}
},
{
"@type": "Question",
"name": "公開後に動画を差し替えたいときはどうすればよいですか",
"acceptedAnswer": {
"@type": "Answer",
"text": "同じURLのままファイルを差し替えられるため、動画の入れ替えや修正をしてもリンクを送り直す必要はありません。相手は同じURLにアクセスするだけで最新の内容を確認できます。"
}
},
{
"@type": "Question",
"name": "最短で進める場合でも省略しないほうがよい確認は何ですか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "不要ファイルや秘密情報の除去、スマホ表示確認、共有相手と期限の明記は省略しないほうが安全です。URLを作る速さより、誤共有を防ぐことを優先します。"
}
}
]
}
```