プレイ/一時停止ボタンの追加方法

プレイ/一時停止ボタンを含める設定は、2022年6月以降に追加されたすべての新しい背景ビデオに対してデフォルトで有効になっています。2022年6月以前に追加された背景ビデオにプレイ/一時停止ボタンを追加するには、この設定を手動で有効にする必要があります。

既存の背景ビデオにプレイ/一時停止ボタンを追加するには：

1. キャンバス上のBackground videoを選択します。
2. Background videoをダブルクリックするか、Enter/Returnキーを押してBackground video settingsを開きます。
3. プレイ/一時停止ボタンを含めるチェックボックスをオンにします。

重要: アクセシビリティ基準を満たし、サイト訪問者のより良いエクスペリエンスを確保するために、プレイ/一時停止ボタンを含める設定を有効にすることを強くお勧めします。さらに、この設定を無効にしている場合、オペレーティングシステム設定で動作の軽減を希望と設定しているサイト訪問者は、背景ビデオを再生できなくなります。

プレイ/一時停止ボタンのスタイル設定方法

一旦Include play/pause button 設定が有効になると、プレイ/一時停止ボタンを自分の好みにカスタマイズできます。

ボタンの位置設定

デフォルトでは、プレイ/一時停止ボタンはposition: absoluteに設定されており、staticではない最初の親要素（この場合、Background video要素）に対して相対的です。これは、ボタンが背景ビデオ要素内にネストされ、position: absoluteに設定されていない要素の上に表示されることを意味します。position: absoluteについて詳しく学ぶ。

プレイ/一時停止ボタンが常に背景ビデオの上に表示されるようにするには、プレイ/一時停止ボタン要素を選択し、Z-index値を設定できます。任意の要素のデフォルトのZ-index値は0ですので、0より大きい値は要素を最前面に配置します。ここでは、9999のような非常に高いZ-index値を自由に使用して構いません。

ボタンの状態アイコンをカスタマイズする

プレイ/一時停止ボタンには2つの状態、再生と一時停止があります。

再生/一時停止ボタンにはデフォルトのアイコンと、再生および一時停止の状態のための組み込みの代替テキストが付属していますが、任意の画像をアップロードできます。

重要: デフォルトのアイコンを置き換える場合、自分の画像に代替テキストを追加してください。そうすることで、サイトをナビゲートするすべての人がこれらのボタンの目的を理解できます。例えば、再生の状態の画像には「動画再生」という代替テキストを追加し、一時停止の状態の画像には「動画一時停止」という代替テキストを追加できます。

デフォルトのアイコンを置き換えるには：

1. アセットパネルを開き、使用したい画像をアップロードするための「雲」アイコンをクリックします。
2. キャンバス上またはナビゲーターパネルで再生/一時停止ボタンを選択します。
3. スタイルを適用したい状態（例: 再生または一時停止）を設定パネル > 再生/一時停止ボタンの設定でクリックします。
4. アセットパネルから使用したい画像を選択し、現在の状態に一致する要素の内部にドラッグアンドドロップします（例: 再生状態または一時停止状態）。
5. 状態要素内からデフォルトの画像を削除します。

デフォルトの画像と異なるサイズの画像やアイコンを使用することができます。画像のサイズを親要素（例: 再生/一時停止ボタン）に基づいて調整できます。

親要素に基づいて画像のサイズを調整するには：

1. キャンバス上またはNavigator panelで再生/一時停止ボタンを選択します。
2. スタイルを適用したい状態（例: 再生または一時停止）をSettings panel > Settings panel > Play/pause button settingsでクリックします。
3. 現在の状態に一致する要素内の画像を選択します（例: 再生状態または一時停止状態）。
4. Style panel > Sizeを開き、画像のwidthとheightを100%に設定して、画像が親要素（例: 再生/一時停止ボタン）の100%を占めるようにします。
5. 再生/一時停止ボタンを選択します。
6. Style panel > Size  を開き、任意のサイズに幅と高さを設定します。
7. Style panel > Spacingを開き、必要に応じてpaddingを調整します。

注意: ボタンアイコンにSVGファイルを使用している場合、画像の親要素（例: 再生状態または一時停止状態）が寸法に絶対単位を使用していないため、相対的なパーセンテージベースの単位ではなく、ピクセル値を使用して画像に明示的に定義された幅と高さの寸法を指定する必要があります。そうしないと、画像は0ピクセルに縮小されます。

ボタンのアウトラインのスタイリング

再生/一時停止ボタンには、オフセットの青いアウトラインを持つデフォルトのフォーカス（キーボード）スタイルがありますが、このアウトラインを自分のスタイルに合わせて設定できます。

キーボードでサイトを操作するサイト訪問者にとって、このアウトラインは再生/一時停止ボタンがフォーカスを持っていること（つまり、ボタンと対話しているとき）を明示的に示します。このアウトラインは、サイト訪問者がマウスまたは指タップを使用して再生/一時停止ボタンと対話する場合には表示されません。

再生/一時停止ボタンのアウトラインをカスタマイズするには：

1. キャンバス上またはナビゲーターパネルで再生/一時停止ボタンを選択します。
2. スタイルパネルを開き、再生/一時停止ボタンにクラスを付けます。
3. Selectorフィールドのドロップダウンをクリックして、Statesメニューを開きます。
4. フォーカス（キーボード）ステートを選択します。
5. Style panel > Effects までスクロールし、必要に応じてoutline、width、offset、および/またはcolorプロパティを編集します。

再生/一時停止ボタンと、フォーカス（キーボード）状態のデフォルトのアウトラインスタイル。

フォーカス（キーボード）状態の再生/一時停止ボタンとカスタムアウトラインスタイル。

ボタンに関して他のスタイリング変更も行うことができます（例：ボーダー、背景、バックドロップフィルターなど）

プロのヒント： 画像と再生/一時停止ボタンにクラスを追加して、スタイルを一貫性を持たせるためにさまざまな状態で再利用できます。要素間でスタイリング情報を保存するためにクラスを使用する方法について詳しく学びましょう。