背景ビデオの再生/一時停止ボタンを有効にし、サイト訪問者にコントロールを提供し、アクセシビリティを向上させましょう。
背景ビデオはサイト訪問者を引き込むことができたり、サイトに映画のような雰囲気を加えることができますが、認知障害、前庭障害、または運動病のある人々にとっては気を散らすことがあるか、場合によっては有害です。アクセシビリティのために最善の実践は、自動的に動き出し、5秒以上動き続けるコンテンツを一時停止、停止、または非表示にするためのコントロールをユーザーに提供することです（WCAG Success Criterion 2.2.2: 一時停止、停止、非表示）。
Webflowには、背景ビデオにプレイ/一時停止ボタンの設定が組み込まれており、サイト訪問者に背景ビデオコンテンツを一時停止または再生するためのコントロールを提供できます。
このレッスンでは以下の内容を学びます：
プレイ/一時停止ボタンを含める設定は、2022年6月以降に追加されたすべての新しい背景ビデオに対してデフォルトで有効になっています。2022年6月以前に追加された背景ビデオにプレイ/一時停止ボタンを追加するには、この設定を手動で有効にする必要があります。
既存の背景ビデオにプレイ/一時停止ボタンを追加するには：
一旦Include play/pause button 設定が有効になると、プレイ/一時停止ボタンを自分の好みにカスタマイズできます。
デフォルトでは、プレイ/一時停止ボタンはposition: absoluteに設定されており、staticではない最初の親要素（この場合、Background video要素）に対して相対的です。これは、ボタンが背景ビデオ要素内にネストされ、position: absoluteに設定されていない要素の上に表示されることを意味します。position: absoluteについて詳しく学ぶ。
プレイ/一時停止ボタンが常に背景ビデオの上に表示されるようにするには、プレイ/一時停止ボタン要素を選択し、Z-index値を設定できます。任意の要素のデフォルトのZ-index値は0ですので、0より大きい値は要素を最前面に配置します。ここでは、9999のような非常に高いZ-index値を自由に使用して構いません。
プレイ/一時停止ボタンには2つの状態、再生と一時停止があります。
再生/一時停止ボタンにはデフォルトのアイコンと、再生および一時停止の状態のための組み込みの代替テキストが付属していますが、任意の画像をアップロードできます。
デフォルトのアイコンを置き換えるには：
デフォルトの画像と異なるサイズの画像やアイコンを使用することができます。画像のサイズを親要素（例: 再生/一時停止ボタン）に基づいて調整できます。
親要素に基づいて画像のサイズを調整するには：
再生/一時停止ボタンには、オフセットの青いアウトラインを持つデフォルトのフォーカス（キーボード）スタイルがありますが、このアウトラインを自分のスタイルに合わせて設定できます。
キーボードでサイトを操作するサイト訪問者にとって、このアウトラインは再生/一時停止ボタンがフォーカスを持っていること（つまり、ボタンと対話しているとき）を明示的に示します。このアウトラインは、サイト訪問者がマウスまたは指タップを使用して再生/一時停止ボタンと対話する場合には表示されません。
再生/一時停止ボタンのアウトラインをカスタマイズするには：
再生/一時停止ボタンと、フォーカス（キーボード）状態のデフォルトのアウトラインスタイル。
フォーカス（キーボード）状態の再生/一時停止ボタンとカスタムアウトラインスタイル。
ボタンに関して他のスタイリング変更も行うことができます（例：ボーダー、背景、バックドロップフィルターなど）
