デザインカスタマイズ

プレイヤーを配置する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サイズ
ウォーターマークの高さです。