動画埋め込みサンプル

実際の表示

スクロールして画面に近づいたものから順に読み込まれ、再生が始まります。画面から外れると自動で停止します。

ホームページ制作自動化

被リンク獲得業務などを自動化

動画編集を自動化

契約書チェックを効率化

解析ダッシュボードを統合

SEO記事制作を自動化

動画の仕様

GIFではなくMP4です。同じ内容をGIFで作ると数MBになりますが、MP4なら数十KBに収まります。

形式	MP4（H.264）／音声なし
解像度	1068 × 600（16:9相当）
フレームレート	20fps
再生時間	8〜18秒（ループ再生）
ファイルサイズ	1本あたり 51〜118KB（6本合計で約500KB）
サムネ画像	JPG／19〜55KB（読み込み前に表示）

実装のポイント

muted loop playsinline autoplay … 音なし・ループ・自動再生。GIFと同じ見え方になります。playsinline がないとiPhoneで全画面再生に乗っ取られるので必須です
src ではなく data-src に入れる … ページを開いた時点では読み込まれません。JSが画面接近を検知してから src に差し替えます
preload="none" … ブラウザの先読みも止めます。ここまでやって初めて「初期表示に影響しない」状態になります
poster でサムネを指定 … 読み込み前はこの静止画が出ます。指定がないと空白になります
CSSで aspect-ratio を指定 … 読み込み前後で高さが変わらず、レイアウトのガタつき（CLS）が起きません
画面外に出たら pause … 見えていない動画を回し続けないので、端末の負荷とバッテリー消費を抑えられます

コード（1本ぶん）

これをコピーして、パスとキャプションを差し替えるだけで動きます。

<div class="wm-demo-card">
  <video class="wm-demo-video"
         poster="assets/01_homepage.jpg"
         data-src="assets/01_homepage.mp4"
         muted loop playsinline autoplay preload="none"
         aria-label="ホームページ制作を、AIが一気通貫で自動化"></video>
  <p class="wm-demo-caption">ホームページ制作自動化</p>
</div>

<!-- ページの最後に1回だけ。ページ内の全動画に効きます -->
<link rel="stylesheet" href="css/wm-video.css">
<script src="js/wm-video-lazy.js" defer></script>

ZIPの中身

index.html … このページ。ダブルクリックでそのまま開けます

snippet.html … コピペ用の最小コード

css/wm-video.css … 最小スタイル（デザインに合わせて上書き可）

js/wm-video-lazy.js … 遅延読み込みと自動再生の制御

assets/ … 動画6本とサムネ6枚（合計729KB）

README.md … 設置手順