GUMLET JAPAN GUIDE自社サイトへの高速動画埋め込み・
自社サイトへの高速動画埋め込み・
DRM設定ガイド
レスポンシブ表示、遅延読み込み、アクセス制御を組み合わせ、Core Web Vitalsを意識した動画実装を進めます。
レスポンシブ埋め込みコード
HTML / CSS16:9 container
<div class="video-frame">
<iframe src="https://play.gumlet.io/embed/YOUR_VIDEO_ID"
title="動画タイトル" loading="lazy"
allow="autoplay; encrypted-media; fullscreen" allowfullscreen>
</iframe>
</div>
.video-frame {{ aspect-ratio: 16 / 9; position: relative; }}
.video-frame iframe {{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }}Core Web Vitalsを悪化させない3つのポイント
- ファーストビュー以外のiframeには
loading="lazy"を使う - コンテナの
aspect-ratioを先に確保し、CLSを抑える - 動画・ポスター画像・CDN設定を実測し、LCPへの影響を確認する
動画保護の設定
用途に応じて、DRM、ドメイン制限、署名付きURLを組み合わせます。保護機能はすべての録画・複製を完全に防ぐものではないため、認証と権限管理も合わせて設計してください。
CMSでの実装手順
WordPress
カスタムHTMLブロックに埋め込みコードを設置し、テーマ側でコンテナサイズを指定します。
Next.js / React
レイアウトシフトを防ぐコンテナを用意し、表示タイミングに応じてiframeを遅延読み込みします。
公開後の確認
スマートフォンを含む各画面幅で再生、シーク、権限、読み込み指標を確認します。