クリックで読み込む動画埋め込み

通常の埋め込みが、誰も見ないうちにしていること

動画の「共有」メニューからコピーするコードは<iframe>で、ページの中に設けた別サイトへの小さな窓です。ブラウザはページを描画するとすぐにこの窓を埋めます。YouTubeの動画1本で、およそ20のリクエストと数百キロバイトのスクリプトが、訪問者全員についてGoogleのサーバーから取得されます。動画を素通りしてスクロールする人も含めてです。

そのリクエストのひとつひとつに、訪問者のIPアドレスとあなたのページのアドレスが含まれます。プレーヤーはブラウザ内の自分用のストレージを読み書きすることもできます。つまり、ページは遅くなり、訪問者は自分で選んだわけでもない企業に存在を知られることになります。

このツールが書く2種類のコード

クリックで読み込む

ページには、動画の枠に見えるリンクが置かれます。ポスター画像、再生の三角マーク、アクセシブルなラベル付きです。一度だけ読み込む短いスクリプトが、そのリンクのクリックを待ち、クリックされてはじめてautoplay=1付きの本物のプレーヤーに差し替えます。そのため、ほとんどの端末では1回押すだけで再生されます。スクリプトがない、またはブロックされている場合でもリンクは機能し、新しいタブでプラットフォーム上の動画を開きます。

プライバシー強化ドメインの通常のiframe

スクリプトは一切使いません。プレーヤーはページと一緒に読み込まれますが、youtube-nocookie.comから、またはVimeoならdnt=1付きで読み込まれます。さらにloading="lazy"が付くので、ページの下のほうにある動画は、訪問者がその近くまでスクロールするまで待ちます。

どちらの場合も、プレーヤーはCSSのaspect-ratioプロパティでサイズを決めた箱に収まるため、置いた列の幅に合わせて伸縮します。/shorts/のリンクは自動で判別され、幅360ピクセルまでの9:16の箱になります。

最後の漏れはポスター画像

YouTubeの場合、クリック読み込みのコードは、デフォルトでi.ytimg.com上の動画のサムネイルを指します。このサーバーはGoogleのものです。Cookieは設定しませんが、画像を読み込むときに訪問者のIPアドレスは見えます。第三者へのリクエストをゼロにするには、動画の1コマを保存して自分のサイトにアップロードし、そのアドレスをポスターの欄に貼り付けてください。アドレスはhttps://にしましょう。ブラウザは安全なページ上の安全でない画像を拒否するからです。

Vimeoにはサムネイルの決まったアドレスがないため、デフォルトはタイトルを表示した暗い枠になります。同じポスターの欄で画像に置き換えられます。

サイトにコードを貼り付ける

出力はインラインスタイル付きの普通のHTMLなので、テーマには依存しません。

• WordPress：「カスタムHTML」ブロックを追加して貼り付けます。管理者は<script>部分も保存できますが、マルチサイトネットワークで編集者権限のアカウントでは、保存時に削除されることがあります。そうなっても、ポスターは動画にリンクしたままです。通常のiframeに切り替えることもできます。
• Squarespace、Wix、Webflow、Shopify：コードブロックか埋め込みブロックを使ってください。標準の動画ブロックを使うと、通常のプレーヤーがそのまま戻ってきてしまいます。
• 静的HTML：動画を置きたい場所に貼り付けます。1ページに複数の動画を置く場合は、それぞれのコードを丸ごと貼り付けてください。スクリプトはすでに実行済みかどうかを自分で確認します。
• Content-Security-Policy：frame-srcでwww.youtube-nocookie.comまたはplayer.vimeo.comを許可してください。インラインスクリプトを禁止するポリシーではクリック読み込みのスクリプトがブロックされるため、自分で配信するファイルに移してください。

タイトルの欄は必ず入力してください。iframeのtitleと再生リンクのラベルになり、スクリーンリーダーが読み上げるのはそれです。空欄にすると、聞いている人には「YouTube動画」としか伝わりません。