# デザインカスタマイズ

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

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

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

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

# --uliza-accent-color

値：CSS色
デフォルト値：rgb(255, 255, 255)
アクセントカラーです。

# --uliza-ad-mark-color

値：CSS色
デフォルト値：rgb(255, 0, 0)
広告再生位置マーカーの色です。

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

値：CSS色
デフォルト値：rgb(255, 0, 0)
広告再生時のシークバーの色です。

# --uliza-audio-controller-color

値：CSS色
デフォルト値：rgb(0, 0, 0)
コントロールバーの背景色です。オーディオの再生にのみ適用します。

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

値：表示設定値
デフォルト値：var(--display-value)
音声ボタンの表示／非表示です。設定メニューに対しても有効です。

# --uliza-base-background-color

値：CSS色
デフォルト値：rgb(255, 0, 0)
プレイヤーの背景色です。

# --uliza-base-font-size

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

# --uliza-beginning-button-display

値：表示設定値
デフォルト値：none
開始位置ボタンの表示／非表示です。

# --uliza-center-controller-display

値：表示設定値
デフォルト値：var(--display-value)
PCブラウザでのセンターコントローラーの表示／非表示です。

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

値：表示設定値
デフォルト値：var(--display-value)
モバイルブラウザでのセンターコントローラーの表示／非表示です。

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

値：表示設定値
デフォルト値：var(--display-value)
センターコントローラー上の再生／一時停止ボタンの表示／非表示です。

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

値：表示設定値
デフォルト値：var(--display-value)
センターコントローラー上の戻るボタンの表示／非表示です。

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

値：表示設定値
デフォルト値：var(--display-value)
センターコントローラー上の進むボタンの表示／非表示です。

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

値：表示設定値
デフォルト値：var(--display-value)
次チャプターボタンの表示／非表示です。

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

値：表示設定値
デフォルト値：var(--display-value)
前チャプターボタンの表示／非表示です。

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

値：CSSサイズ
デフォルト値：10px
コントロールバーのボタンの左右の余白です。

# --uliza-control-bar-display

値：表示設定値
デフォルト値：var(--display-value)
コントロールバーの表示／非表示です。

# --uliza-controller-gradient-bottom

値：CSS色
デフォルト値：linear-gradient(to top, #000000a5 0%, #0000005c 14%, #0000003e 30%, #00000030 45%, #0000000a 89%, #00000000 100%)
コントローラーのグラデーション（下部分）です。

# --uliza-controller-gradient-top

値：CSS色
デフォルト値：linear-gradient(to bottom, #000000ba 0%, #00000029 47%, #0000000d 64%, #00000000 100%)
コントローラーのグラデーション（上部分）です。

# --uliza-current-time-display

値：表示設定値
デフォルト値：var(--display-value)
再生位置の表示／非表示です。

# --uliza-disable-color

値：CSS色
デフォルト値：rgb(153, 153, 153)
無効状態のボタンの色です。

# --uliza-duration-display

値：表示設定値
デフォルト値：var(--display-value)
コンテンツの尺の表示／非表示です。

# --uliza-error-color

値：CSS色
デフォルト値：rgb(199, 0, 0)
AirPlay接続失敗またはCast接続失敗の際に適用するボタンの色です。

# --uliza-fullscreen-button-display

値：表示設定値
デフォルト値：var(--display-value)
フルスクリーンボタンの表示／非表示です。

# --uliza-font-family

値：フォントファミリー
デフォルト値：Arial, Helvetica, sans-serif
テキスト部分のフォントです。

# --uliza-help-button-display

値：表示設定値
デフォルト値：var(--display-value)
ヘルプボタンの表示／非表示です。設定メニューに対しても有効です。

# --uliza-hover-color

値：CSS色
デフォルト値：rgb(255, 255, 255)
マウスカーソルでボタンをホバーする際の色です。

# --uliza-live-button-display

値：表示設定値
デフォルト値：var(--display-value)
ライブボタンの表示／非表示です。

# --uliza-live-indicator-color

値：CSS色
デフォルト値：rgb(255, 0, 0)
ライブインジケーターの色です。

# --uliza-live-indicator-display

値：表示設定値
デフォルト値：var(--display-value)
ライブインジケーターの表示／非表示です。

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

値：表示設定値
デフォルト値：var(--display-value)
次コンテンツボタンの表示／非表示です。

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

値：表示設定値
デフォルト値：var(--display-value)
前コンテンツボタンの表示／非表示です。

値：CSSサイズ
デフォルト値：25em
次／前コンテンツ用ツールチップの横幅です。

値：CSSサイズ
デフォルト値：7em
次／前コンテンツ用ツールチップの高さです。

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

値：CSS色（グラデーション可）
デフォルト値：linear-gradient(-45deg, rgb(128, 128, 128) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgb(128, 128, 128) 50%, rgb(128, 128, 128) 75%, rgba(0, 0, 0, 0) 75%) 0 0/7px 7px
シーク無効範囲の背景色です。

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

値：表示設定値
デフォルト値：unset
Cardboardボタンの表示／非表示です。設定メニューに対しても有効です。

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

値：表示設定値
デフォルト値：var(--display-value)
パーツサイズボタンの表示／非表示です。設定メニューに対しても有効です。

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

値：表示設定値
デフォルト値：var(--display-value)
ピクチャーインピクチャーボタンの表示／非表示です。

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

値：表示設定値
デフォルト値：var(--display-value)
再生速度ボタンの表示／非表示です。設定メニューに対しても有効です。

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

値：CSS色
デフォルト値：rgba(0, 0, 0, 0.8)
再生開始ボタンの色です。

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

値：表示設定値
デフォルト値：var(--display-value)
再生開始ボタンの表示／非表示です。

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

値：表示設定値
デフォルト値：var(--display-value)
PCブラウザでのコントロールバー上の再生／一時停止ボタンの表示／非表示です。

# --uliza-play-toggle-button-display-for-mobile

値：表示設定値
デフォルト値：none
モバイルブラウザでのコントロールバー上の再生／一時停止ボタンの表示／非表示です。

# --uliza-primary-color

値：CSS色
デフォルト値：rgb(239, 239, 239)
アイコンやテキスト等の色です。

# --uliza-reaction-graph-color

値：CSS色
デフォルト値：rgba(245, 251, 245, 0.5)
リアクショングラフの色です。

# --uliza-repeat-button-display

値：表示設定値
デフォルト値：var(--display-value)
リピートボタンの表示／非表示です。設定メニューに対しても有効です。

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

値：表示設定値
デフォルト値：var(--display-value)
画面ロックボタンの表示／非表示です。

# --uliza-seek-bar-color

値：CSS色
デフォルト値：var(--uliza-accent-color)
シークバーの色です。

# --uliza-seek-bar-display

値：表示設定値
デフォルト値：var(--display-value)
シークバーの表示／非表示です。

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

値：CSS色
デフォルト値：var(--uliza-accent-color)
シークバーのつまみの色です。

値：表示設定値
デフォルト値：var(--display-value)
設定メニューボタンの表示／非表示です。

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

値：表示設定値
デフォルト値：none
コントロールバー上の戻るボタンの表示／非表示です。

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

値：表示設定値
デフォルト値：none
コントロールバー上の進むボタンの表示／非表示です。

# --uliza-subtitles-background-color

値：CSS色
デフォルト値：rgba(26, 26, 26, 0.8)
字幕の背景色です。

# --uliza-subtitles-button-display

値：表示設定値
デフォルト値：var(--display-value)
字幕ボタンの表示／非表示です。設定メニューに対しても有効です。

# --uliza-subtitles-color

値：CSS色
デフォルト値：rgb(255, 255, 255)
字幕の文字色です。

# --uliza-subtitles-font-family

値：フォントファミリー
デフォルト値：monospace
字幕のフォントです。

# --uliza-subtitles-font-size

値：CSSサイズ
デフォルト値：30px
字幕の文字サイズです。

# --uliza-time-divider-display

値：表示設定値
デフォルト値：var(--display-value)
再生位置と尺の間の仕切りの表示／非表示です。

# --uliza-title-font-size

値：CSSサイズ
デフォルト値：1.8em
タイトルの文字サイズです。

# --uliza-unmute-button-display

値：表示設定値
デフォルト値：var(--display-value)
ミュート解除ボタンの表示／非表示です。

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

値：表示設定値
デフォルト値：var(--display-value)
設定メニューの項目リアクショングラフボタンの表示／非表示です。

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

値：表示設定値
デフォルト値：none
トラッキングオプトアウトボタンの表示／非表示です。設定メニューに対しても有効です。

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

値：表示設定値
デフォルト値：var(--display-value)
画質ボタンの表示／非表示です。設定メニューに対しても有効です。

# --uliza-volume-button-display

値：表示設定値
デフォルト値：var(--display-value)
ボリュームボタンの表示／非表示です。

# --uliza-watermark-width

値：CSSサイズ
デフォルト値：160px
ウォーターマークの横幅です。

# --uliza-watermark-height

値：CSSサイズ
デフォルト値：90px
ウォーターマークの高さです。

← プレイヤーオプション UlizaPlayer →