# デザインカスタマイズ

プレイヤーを配置する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(0, 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色
デフォルト値:rgba(153, 153, 153, 0.6)
無効状態のボタンの色です。

# --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)
前コンテンツボタンの表示/非表示です。

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

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

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

値: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-presentation-position-change-button-display

値:表示設定値 デフォルト値:var(--display-value) プレゼンテーション表示位置ボタンの表示/非表示です。

# --uliza-presentation-fullscreen-view-change-button-display

値:表示設定値 デフォルト値:var(--display-value) プレゼンテーション表示状態ボタンの表示/非表示です。

# --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)
シークバーのつまみの色です。

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

値:表示設定値
デフォルト値: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
ウォーターマークの高さです。