videoタグの使い方（自動再生、ミュート、インライン再生、ポスター画像）、字幕トラックの追加、ヒーロー背景動画の作り方、YouTubeやVimeoをレスポンシブかつ遅延読み込みで埋め込む方法を解説し、埋め込みコード作成ツールも用意しています。
自分の動画ファイルにはvideo要素を使います：<video src="clip.mp4" controls playsinline preload="metadata" poster="still.jpg">。自動再生はミュートと組み合わせた場合にしか機能しません。YouTubeやVimeoには、遅延読み込みの指定とタイトルを付けたiframeを使い、レスポンシブにするためにアスペクト比を16 / 9に設定します。下のビルダーなら、どちらのコードも自動で作成できます。
よく使う動画の属性
埋め込みビルダーでソースを選び、トグルを切り替えれば、忘れられがちな属性があらかじめ入ったマークアップをコピーできます。iPhone向けのインライン再生、スクリーンリーダー向けのiframeのタイトル、YouTubeのプライバシー強化モード、そして決してつぶれない16:9の枠です。以下のセクションでは、字幕、背景動画、サンドボックス化、そして重いプレーヤーを初回描画から外すクリック読み込み型のファサードについて解説します。
ブラウザーは音声付きの自動再生をブロックします。自動再生の属性と一緒にミュートを、iPhone向けにはインライン再生の属性も追加しましょう。データセーバーモードや一部のユーザー設定ではそれでもブロックされることがあるため、ポスター画像だけでも成り立つページにしておきましょう。
固定の幅と高さの指定を外し、iframeにwidth: 100%; height: auto; aspect-ratio: 16 / 9を設定します。アスペクト比のプロパティが、どの画面サイズでも高さを幅に合わせて保つため、古いpadding-bottom: 56.25%のラッパーは不要になります。
YouTubeのプライバシー強化モードです。YouTubeによると、視聴者が動画を再生するまで、視聴情報はその人の閲覧のパーソナライズに使われません。それ以外の点では埋め込みは同じように動作します。srcのドメインを差し替えるだけです。
空のsandbox属性は、すべての制限を適用します。スクリプト、フォーム、ポップアップ、トップレベルのナビゲーションが禁止され、固有のオリジンが割り当てられます。そのうえで、allow-scriptsやallow-formsなどのトークンで、フレームに必要なものだけを許可し直します。信頼できないコンテンツでは、allow-scriptsとallow-same-originを組み合わせないようにしましょう。
タイミング付きのキューを含むWebVTTファイルを書き、video要素の中に<track kind="captions" src="captions.vtt" srclang="en" label="English" default>を追加します。ブラウザーがコントロールに字幕メニューを追加します。ファイルは同じオリジンから、またはCORSを設定して配信する必要があります。
ブラウザーは対応している最初のソースを再生するので、より小さく新しい形式を先に書きましょう。中の段落は、動画にまったく対応していないブラウザーでしか表示されません。
kind="captions"は効果音や話者名を含む字幕、kind="subtitles"は翻訳用の字幕です。defaultを付けると、最初の字幕がオンになります。
ファイルはWEBVTTで始まり、その後に開始時刻と終了時刻、続いてテキストというキューが並びます。text/vttのコンテンツタイプで配信してください。
ポスターとヒーローの背景に同じ画像を使うので、動画の読み込み前も、動きの軽減のために動画を隠したときも、ヒーローが正しく表示されます。
iframeの属性と使いどころ
アスペクト比の指定により、どの幅でもフレームの形が保たれます。nocookieのドメインは、YouTubeのプライバシー強化モードです。
許可し直しているのはスクリプトとフォーム送信だけです。フレームはポップアップを開いたり、あなたのページを遷移させたりできません。
誰かがクリックするまで、ページはプレーヤー全体ではなくサムネイル画像を1枚読み込むだけです。ボタンを使っているので、キーボードでも操作できます。
Web動画の形式（対象ユーザーが使う正確なバージョンはcaniuseで確認してください）
当社の目安は、720pか1080p、音声なし、10秒未満、多くても数メガバイトです。-anで音声を削除し、-movflags +faststartでファイルのダウンロードが終わる前に再生を始められるようにします。
動画ファイル
その他のiframe
埋め込みコードビルダー
ソース
動画のIDまたはURL
動画ファイルのパス
iframeのURL
タイトル（スクリーンリーダーが読み上げます）
ポスター画像（任意）
開始位置（秒）
自動再生（ミュート）
ループ
コントロール
トラッキングしない（dnt=1）
プライバシー強化（nocookie）
遅延読み込み
レスポンシブ 16:9
サンドボックス
コントロールなしで自動再生される動きです。訪問者が止められるよう、独自の一時停止ボタンを追加してください。
マークアップ
コードをコピー
製品の紹介動画
無料で始める · クレジットカード不要