# デザインカスタマイズ

プレイヤーを配置するWebページにCSSを記述することで、プレイヤーの外観をカスタマイズできます。 以下のように.ulizahtml5セレクタに記述します。

<style>
  .ulizahtml5 {
    --uliza-xxx: yyy;
  }
</style>

プレイヤーオプションに同じ効果のある項目が存在する場合、CSSでの指定を推奨します。CSSとプレイヤーオプションの両方を指定する場合、プレイヤーオプションを優先します。

値の凡例
CSS色:CSS仕様に準拠した色の記法です。
CSSサイズ:CSS仕様に準拠した単位付きの数値です。
表示設定値:表示する場合は'var(--display-value)'、表示しない場合は'none'とします。

# --uliza-accent-color

値:CSS色
アクセントカラーです。

# --uliza-ad-mark-color

値:CSS色
広告再生位置マーカーの色です。

# --uliza-ad-seek-bar-color

値:CSS色
広告再生時のシークバーの色です。

# --uliza-audio-controller-color

値:CSS色
コントロールバーの背景色です。オーディオの再生にのみ適用します。

# --uliza-audio-track-button-display

値:表示設定値
音声ボタンの表示/非表示です。設定メニューに対しても有効です。

# --uliza-base-background-color

値:CSS色
プレイヤーの背景色です。

# --uliza-base-font-size

値:CSSサイズ
基準となるサイズです。プレイヤー上の各種パーツ、レイアウトに影響します。

# --uliza-beginning-button-display

値:表示設定値
開始位置ボタンの表示/非表示です。

# --uliza-center-controller-display

値:表示設定値
PCブラウザでのセンターコントローラーの表示/非表示です。

# --uliza-center-controller-display-for-mobile

値:表示設定値
モバイルブラウザでのセンターコントローラーの表示/非表示です。

# --uliza-center-play-toggle-button-display

値:表示設定値
センターコントローラー上の再生/一時停止ボタンの表示/非表示です。

# --uliza-center-skip-backward-button-display

値:表示設定値
センターコントローラー上の戻るボタンの表示/非表示です。

# --uliza-center-skip-forward-button-display

値:表示設定値
センターコントローラー上の進むボタンの表示/非表示です。

# --uliza-chapter-next-button-display

値:表示設定値
次チャプターボタンの表示/非表示です。

# --uliza-chapter-prev-button-display

値:表示設定値
前チャプターボタンの表示/非表示です。

# --uliza-control-bar-button-margin

値:CSSサイズ
コントロールバーのボタンの左右の余白です。

# --uliza-control-bar-display

値:表示設定値
コントロールバーの表示/非表示です。

# --uliza-controller-gradient-bottom

値:CSS色
コントローラーのグラデーション(下部分)です。

# --uliza-controller-gradient-top

値:CSS色
コントローラーのグラデーション(上部分)です。

# --uliza-current-time-display

値:表示設定値
再生位置の表示/非表示です。

# --uliza-disable-color

値:CSS色
無効状態のボタンの色です。

# --uliza-duration-display

値:表示設定値
コンテンツの尺の表示/非表示です。

# --uliza-error-color

値:CSS色
AirPlay接続失敗またはCast接続失敗の際に適用するボタンの色です。

# --uliza-fullscreen-button-display

値:表示設定値
フルスクリーンボタンの表示/非表示です。

# --uliza-font-family

値:フォントファミリー
テキスト部分のフォントです。

# --uliza-help-button-display

値:表示設定値
ヘルプボタンの表示/非表示です。設定メニューに対しても有効です。

# --uliza-hover-color

値:CSS色
マウスカーソルでボタンをホバーする際の色です。

# --uliza-live-button-display

値:表示設定値
ライブボタンの表示/非表示です。

# --uliza-live-indicator-color

値:CSS色
ライブインジケーターの色です。

# --uliza-live-indicator-display

値:表示設定値
ライブインジケーターの表示/非表示です。

# --uliza-next-prev-content-next-button-display

値:表示設定値
次コンテンツボタンの表示/非表示です。

# --uliza-next-prev-content-prev-button-display

値:表示設定値
前コンテンツボタンの表示/非表示です。

# --uliza-next-prev-content-tooltip-width

値:CSSサイズ
次/前コンテンツ用ツールチップの横幅です。

# --uliza-next-prev-content-tooltip-height

値:CSSサイズ
次/前コンテンツ用ツールチップの高さです。

# --uliza-non-seekable-range-color

値:CSS色(グラデーション可)
シーク無効範囲の背景色です。

# --uliza-panorama-cardboard-button-display

値:表示設定値
Cardboardボタンの表示/非表示です。設定メニューに対しても有効です。

# --uliza-parts-size-button-display

値:表示設定値
パーツサイズボタンの表示/非表示です。設定メニューに対しても有効です。

# --uliza-picture-in-picture-button-display

値:表示設定値
ピクチャーインピクチャーボタンの表示/非表示です。

# --uliza-playback-rates-button-display

値:表示設定値
再生速度ボタンの表示/非表示です。設定メニューに対しても有効です。

# --uliza-play-start-button-color

値:CSS色
再生開始ボタンの色です。

# --uliza-play-start-button-display

値:表示設定値
再生開始ボタンの表示/非表示です。

# --uliza-play-toggle-button-display

値:表示設定値
コントロールバー上の再生/一時停止ボタンの表示/非表示です。

# --uliza-primary-color

値:CSS色
アイコンやテキスト等の色です。

# --uliza-reaction-graph-color

値:CSS色
リアクショングラフの色です。

# --uliza-repeat-button-display

値:表示設定値
リピートボタンの表示/非表示です。設定メニューに対しても有効です。

# --uliza-screen-lock-button-display

値:表示設定値
画面ロックボタンの表示/非表示です。

# --uliza-seek-bar-color

値:CSS色
シークバーの色です。

# --uliza-seek-bar-display

値:表示設定値
シークバーの表示/非表示です。

# --uliza-seek-bar-thumb-color

値:CSS色
シークバーのつまみの色です。

# --uliza-setting-menu-button-display

値:表示設定値
設定メニューボタンの表示/非表示です。

# --uliza-subtitles-background-color

値:CSS色
字幕の背景色です。

# --uliza-skip-backward-button-display

値:表示設定値
コントロールバー上の戻るボタンの表示/非表示です。

# --uliza-skip-forward-button-display

値:表示設定値
コントロールバー上の進むボタンの表示/非表示です。

# --uliza-subtitles-button-display

値:表示設定値
字幕ボタンの表示/非表示です。設定メニューに対しても有効です。

# --uliza-subtitles-color

値:CSS色
字幕の文字色です。

# --uliza-subtitles-font-family

値:フォントファミリー
字幕のフォントです。

# --uliza-subtitles-font-size

値:CSSサイズ
字幕の文字サイズです。

# --uliza-time-divider-display

値:表示設定値
再生位置と尺の間の仕切りの表示/非表示です。

# --uliza-title-font-size

値:CSSサイズ
タイトルの文字サイズです。

# --uliza-unmute-button-display

値:表示設定値
ミュート解除ボタンの表示/非表示です。

# --uliza-video-analytics-reaction-graph-button-display

値:表示設定値
設定メニューの項目リアクショングラフボタンの表示/非表示です。

# --uliza-video-analytics-tracking-optout-button-display

値:表示設定値
トラッキングオプトアウトボタンの表示/非表示です。設定メニューに対しても有効です。

# --uliza-video-track-button-display

値:表示設定値
画質ボタンの表示/非表示です。設定メニューに対しても有効です。

# --uliza-volume-button-display

値:表示設定値
ボリュームボタンの表示/非表示です。

# --uliza-watermark-width

値:CSSサイズ
ウォーターマークの横幅です。

# --uliza-watermark-height

値:CSSサイズ
ウォーターマークの高さです。