フルスクリーンボタン full-screen-button

最終更新日： 2025年10月14日

トピック：
{"id":"a01bfd36-4ab8-4bf8-9dc0-5b45b890552e"}

作成対象：

{"id":"d378ca77-2da1-4f39-ad92-1917fe974a38"}
{"id":"b69b2659-1057-424e-8fc5-ed9e016dc554"},{"id":"ff6a42d2-313e-452e-93a6-792e4fad9ff8"}

フルスクリーンボタンを使用すると、ユーザーがフルスクリーンモードを選択したときに、ビデオプレーヤーがフルスクリーンモードに入るか終了します。

フルスクリーンボタンを含むコントロールバーに対して、CSSでサイズ調整、スキン調整、位置を調整できます。

フルスクリーンボタンのアピアランスは、CSS クラスセレクターで制御します。

.s7videoviewer .s7fullscreenbutton

フルスクリーンボタンのCSS プロパティ

上位

パディングを含む上部境界線からの位置。

右

パディングを含む右端からの位置。

さんがを残しました

パディングを含む左端からの位置。

下

パディングを含む下部境界線からの位置。

幅

フルスクリーンボタンの幅。

の高さ

フルスクリーンボタンの高さ。

背景画像

特定のボタン状態の表示画像。

background-position

CSS スプライトを使用する場合は、アートワークスプライト内に配置します。

CSS スプライトを参照してください。

NOTE

このボタンは、stateとselectedの両方の属性セレクターをサポートしており、異なるスキンを異なるボタンの状態に適用するために使用できます。特に、selected='true'は「フルスクリーン」状態に対応し、selected='false'は「通常」状態に対応します。

ボタンツールのヒントはローカライズできます。詳しくは、ユーザーインターフェイス要素のローカライゼーションを参照してください。

例 section-e8caea0a303c425a8a637c2a47c06355

コントロールバーの上端と右端から6 ピクセルの位置に32×32 ピクセルのフルスクリーンボタンを設定する。また、4つの異なるボタンの状態ごとに異なる画像を表示します。

.s7videoviewer . s7fullscreenbutton {
top:6px;
right:6px;
width:32px;
height:32px;
}
.s7videoviewer .s7fullscreenbutton [selected='false'][state='up'] {
background-image:url(images/enterFullBtn_up.png);
}
.s7videoviewer .s7fullscreenbutton [selected='false'][state='over'] {
background-image:url(images/enterFullBtn_over.png);
}
.s7videoviewer .s7fullscreenbutton [selected='false'][state='down'] {
background-image:url(images/enterFullBtn_down.png);
}
.s7videoviewer .s7fullscreenbutton [selected='false'][state='disabled'] {
background-image:url(images/enterFullBtn_disabled.png);
}
.s7videoviewer .s7fullscreenbutton [selected='true'][state='up'] {
background-image:url(images/exitFullBtn_up.png);
}
.s7videoviewer .s7fullscreenbutton [selected='true'][state='over'] {
background-image:url(images/exitFullBtn_over.png);
}
.s7videoviewer .s7fullscreenbutton [selected='true'][state='down'] {
background-image:url(images/exitFullBtn_down.png);
}
.s7videoviewer .s7fullscreenbutton [selected='true'][state='disabled'] {
background-image:url(images/exitFullBtn_disabled.png); }
}

recommendation-more-help

dynamic-media-developer-resources-help-aem-viewers-ref