Home
GuidesAPI ReferenceRelease Notes
HomeLog InHome
Guides
Home
  1. SDK iOS
  2. Video player - iOS
  3. Style customization

BlazeVideosPlayerStyle - iOS

BlazeVideosPlayerStyle provides complete control over the video player's appearance, including heading text, button controls, background color, seek bar, and call-to-action (CTA) button styling. It is typically used for full-screen video experiences and inline players.

Style structs have no public initializer. Get the base style from BlazeVideosPlayerStyle.base(), then modify individual properties.

Getting started

Basic customization

// Get the base video player style
var playerStyle = BlazeVideosPlayerStyle.base()

// Customize basic properties
playerStyle.backgroundColor = UIColor.black
playerStyle.headingText.textColor = UIColor.white
playerStyle.headingText.font = UIFont.systemFont(ofSize: 18, weight: .bold)

// Use the customized style with a player
// This style is typically used for full-screen players or as fullScreenPlayerStyle
// in inline player modes

Button customization

// Get the base style
var playerStyle = BlazeVideosPlayerStyle.base()

// Customize playback controls
playerStyle.buttons.playPause.color = UIColor.systemBlue
playerStyle.buttons.playPause.width = 60
playerStyle.buttons.playPause.height = 60

// Customize navigation buttons
playerStyle.buttons.previous.color = UIColor.white
playerStyle.buttons.next.color = UIColor.white
playerStyle.buttons.replay.color = UIColor.systemOrange

// Customize social buttons
playerStyle.buttons.share.color = UIColor.systemGreen
playerStyle.buttons.like.color = UIColor.systemPink
playerStyle.buttons.like.isVisible = true

// Customize utility buttons
playerStyle.buttons.mute.color = UIColor.systemRed
playerStyle.buttons.exit.color = UIColor.white

Properties

backgroundColor

var backgroundColor: UIColor

The background color of the video player's view container.

playerStyle.backgroundColor = UIColor.black

headingText

var headingText: BlazeVideosPlayerHeadingTextStyle

The heading text style configuration for the video player's title display.

Properties:

  • font: UIFont - The font used for the heading text
  • textColor: UIColor - The color of the heading text
  • contentSource: ContentSource - Determines which field is displayed (.title)
  • isVisible: Bool - Whether the heading text should be visible
  • numberOfLines: Int - Maximum number of lines for the heading text
// Customize heading text
playerStyle.headingText.font = UIFont.systemFont(ofSize: 20, weight: .bold)
playerStyle.headingText.textColor = UIColor.white
playerStyle.headingText.isVisible = true
playerStyle.headingText.numberOfLines = 2

buttons

var buttons: BlazeVideosPlayerButtonsStyle

The button style configuration for all video player controls. The examples below cover the most common buttons; see BlazeVideosPlayerButtonsStyle for the full list. Each button has the following customizable properties:

  • width: CGFloat - Button width
  • height: CGFloat - Button height
  • color: UIColor - Button tint color
  • isVisible: Bool - Button visibility
  • isVisibleForAds: Bool - Button visibility during ads
  • contentHorizontalAlignment: UIControl.ContentHorizontalAlignment - Horizontal alignment
  • contentVerticalAlignment: UIControl.ContentVerticalAlignment - Vertical alignment
  • customImage: BlazeVideosPlayerButtonCustomImageStates? - Custom button images

Playback controls

mute - Audio muting control

playerStyle.buttons.mute.color = UIColor.systemRed
playerStyle.buttons.mute.width = 40
playerStyle.buttons.mute.height = 40
playerStyle.buttons.mute.isVisible = true

playPause - Primary play/pause control

playerStyle.buttons.playPause.color = UIColor.white
playerStyle.buttons.playPause.width = 60
playerStyle.buttons.playPause.height = 60
playerStyle.buttons.playPause.isVisible = true

replay - Restart playback from beginning

playerStyle.buttons.replay.color = UIColor.systemOrange
playerStyle.buttons.replay.width = 44
playerStyle.buttons.replay.height = 44

Navigation controls

previous - Navigate to previous video

playerStyle.buttons.previous.color = UIColor.white
playerStyle.buttons.previous.isVisible = true

next - Navigate to next video

playerStyle.buttons.next.color = UIColor.white
playerStyle.buttons.next.isVisible = true

Social interaction controls

share - Share video functionality

playerStyle.buttons.share.color = UIColor.systemBlue
playerStyle.buttons.share.isVisible = true

like - Like/favorite video functionality

playerStyle.buttons.like.color = UIColor.systemPink
playerStyle.buttons.like.isVisible = true

Display controls

exit - Exit full-screen mode

playerStyle.buttons.exit.color = UIColor.white
playerStyle.buttons.exit.isVisible = true

seekBar

var seekBar: BlazeVideosPlayerSeekBarStyle

The seek bar style configuration that controls the video progress indicator appearance for different playback states.

Properties:

  • playingState: BlazeSeekBarStyle - Style when video is playing
  • pausedState: BlazeSeekBarStyle - Style when video is paused
  • isVisible: Bool - Overall seek bar visibility
  • horizontalSpacing: CGFloat - Horizontal margin from container edges
  • bottomSpacing: CGFloat - Distance from container bottom

BlazeSeekBarStyle properties:

  • isVisible: Bool - Visibility for this specific state
  • backgroundColor: UIColor - Background track color
  • progressColor: UIColor - Progress/filled portion color
  • height: CGFloat - Track height
  • cornerRadius: CGFloat - Track corner radius
  • thumbColor: UIColor? - Thumb/scrubber color
  • thumbImage: UIImage? - Custom thumb image
  • thumbSize: CGFloat - Thumb size
  • isThumbVisible: Bool - Thumb visibility
// Basic seek bar configuration
playerStyle.seekBar.isVisible = true
playerStyle.seekBar.horizontalSpacing = 20
playerStyle.seekBar.bottomSpacing = 16

// Playing state customization
playerStyle.seekBar.playingState.progressColor = UIColor.systemBlue
playerStyle.seekBar.playingState.backgroundColor = UIColor.lightGray
playerStyle.seekBar.playingState.height = 4
playerStyle.seekBar.playingState.isThumbVisible = false

// Paused state customization
playerStyle.seekBar.pausedState.progressColor = UIColor.systemOrange
playerStyle.seekBar.pausedState.backgroundColor = UIColor.gray
playerStyle.seekBar.pausedState.height = 8
playerStyle.seekBar.pausedState.thumbColor = UIColor.white
playerStyle.seekBar.pausedState.thumbSize = 16
playerStyle.seekBar.pausedState.isThumbVisible = true

cta

var cta: BlazeVideosPlayerCtaStyle

The call-to-action (CTA) button style configuration for the video player. See BlazeVideosPlayerCtaStyle for the full reference.

Properties:

  • isVisible: Bool - Whether the CTA button is visible
  • cornerRadius: CGFloat - Corner radius of the CTA button
  • width: CGFloat? - Width of the CTA button (nil for auto-sizing)
  • height: CGFloat - Height of the CTA button
  • font: UIFont - Font used for the CTA text
  • icon: UIImage? - Optional icon image for the button
  • borderColor: UIColor - Border color of the CTA button
  • borderWidth: CGFloat - Border width of the CTA button
// Customize CTA button
playerStyle.cta.isVisible = true
playerStyle.cta.cornerRadius = 8
playerStyle.cta.height = 40
playerStyle.cta.width = 120
playerStyle.cta.font = UIFont.systemFont(ofSize: 16, weight: .semibold)
playerStyle.cta.icon = UIImage(systemName: "play.circle.fill")

captions

var captions: BlazeCaptionsStyle

The closed-captions style configuration for the video player. Controls the caption font and where the captions box is positioned within the player. See BlazeCaptionsStyle for the full reference.

Properties:

  • font: UIFont? - Font used for the captions text. Pass nil to keep the renderer's default font family.
  • positioning: BlazeCaptionsPositioning - Horizontal (xPosition) and vertical (yPosition) positioning of the captions box.
// Custom caption font
playerStyle.captions.font = UIFont.systemFont(ofSize: 18, weight: .medium)

// Center horizontally, pin to the bottom
playerStyle.captions.positioning.xPosition = .center
playerStyle.captions.positioning.yPosition = .bottom

// Or use explicit offsets (percent of the player size, 0...100)
playerStyle.captions.positioning.xPosition = .custom(offsetPercent: 10)
playerStyle.captions.positioning.yPosition = .custom(offsetPercent: 80)

overlayVisibilityThreshold

var overlayVisibilityThreshold: TimeInterval

How long, in seconds, the controls overlay stays visible before auto-hiding after being shown. Defaults to 3.0. Non-positive values (zero or negative) fall back to the default.

// Keep the controls overlay visible for 5 seconds before auto-hiding
playerStyle.overlayVisibilityThreshold = 5

statusIndicator

var statusIndicator: BlazeVideosPlayerStatusIndicatorStyle

The style of the status indicator chip (LIVE / UPCOMING / ENDED) shown in the player for live streams. See BlazeVideosPlayerStatusIndicatorStyle for the full reference.

backToLiveButton

var backToLiveButton: BlazeVideosPlayerBackToLiveButtonStyle

The style of the live badge, which reads "Live" at the live edge and becomes a tappable "Back to Live" control once the viewer scrubs behind it. See BlazeVideosPlayerBackToLiveButtonStyle for the full reference.

waitingRoomMessage

var waitingRoomMessage: String

The message shown in the waiting room overlay while a stream is upcoming.

Complete examples

Dark theme player style

// Create a dark theme player style
var darkThemeStyle = BlazeVideosPlayerStyle.base()

// Set dark background
darkThemeStyle.backgroundColor = UIColor.black

// Configure heading with light text
darkThemeStyle.headingText.textColor = UIColor.white
darkThemeStyle.headingText.font = UIFont.systemFont(ofSize: 18, weight: .bold)
darkThemeStyle.headingText.isVisible = true

// Set light colored buttons
darkThemeStyle.buttons.playPause.color = UIColor.white
darkThemeStyle.buttons.playPause.width = 64
darkThemeStyle.buttons.playPause.height = 64

darkThemeStyle.buttons.mute.color = UIColor.white
darkThemeStyle.buttons.exit.color = UIColor.white

// Social buttons with accent colors
darkThemeStyle.buttons.share.color = UIColor.systemBlue
darkThemeStyle.buttons.like.color = UIColor.systemRed

// Configure seek bar with theme colors
darkThemeStyle.seekBar.playingState.progressColor = UIColor.systemBlue
darkThemeStyle.seekBar.playingState.backgroundColor = UIColor.darkGray
darkThemeStyle.seekBar.pausedState.progressColor = UIColor.systemBlue
darkThemeStyle.seekBar.pausedState.thumbColor = UIColor.white

// Style CTA with theme
darkThemeStyle.cta.cornerRadius = 12
darkThemeStyle.cta.height = 44
darkThemeStyle.cta.font = UIFont.systemFont(ofSize: 16, weight: .medium)

Sport-branded player style

// Create a sport-branded player style
var sportStyle = BlazeVideosPlayerStyle.base()

// Brand colors
let teamPrimary = UIColor.systemBlue
let teamSecondary = UIColor.systemOrange
let teamAccent = UIColor.systemYellow

// Set branded background
sportStyle.backgroundColor = UIColor.black

// Configure branded heading
sportStyle.headingText.textColor = teamPrimary
sportStyle.headingText.font = UIFont.systemFont(ofSize: 20, weight: .bold)

// Set team-colored controls
sportStyle.buttons.playPause.color = teamPrimary
sportStyle.buttons.playPause.width = 68
sportStyle.buttons.playPause.height = 68

sportStyle.buttons.mute.color = teamSecondary
sportStyle.buttons.replay.color = teamAccent
sportStyle.buttons.previous.color = teamPrimary
sportStyle.buttons.next.color = teamPrimary

// Social buttons
sportStyle.buttons.share.color = teamSecondary
sportStyle.buttons.like.color = UIColor.systemRed

// Configure sport-themed seek bar
sportStyle.seekBar.playingState.progressColor = teamPrimary
sportStyle.seekBar.pausedState.progressColor = teamSecondary
sportStyle.seekBar.pausedState.thumbColor = teamAccent

// Branded CTA
sportStyle.cta.cornerRadius = 10
sportStyle.cta.height = 48
sportStyle.cta.font = UIFont.systemFont(ofSize: 18, weight: .bold)
sportStyle.cta.isVisible = true

Minimal clean player style

// Create a minimal clean player style
var cleanStyle = BlazeVideosPlayerStyle.base()

// Clean background
cleanStyle.backgroundColor = UIColor.systemBackground

// Minimal heading
cleanStyle.headingText.font = UIFont.systemFont(ofSize: 16, weight: .medium)
cleanStyle.headingText.textColor = UIColor.label
cleanStyle.headingText.numberOfLines = 1

// Essential controls only
cleanStyle.buttons.playPause.isVisible = true
cleanStyle.buttons.playPause.color = UIColor.label
cleanStyle.buttons.mute.isVisible = true
cleanStyle.buttons.mute.color = UIColor.label
cleanStyle.buttons.exit.isVisible = true
cleanStyle.buttons.exit.color = UIColor.label

// Hide non-essential buttons
cleanStyle.buttons.share.isVisible = false
cleanStyle.buttons.like.isVisible = false
cleanStyle.buttons.previous.isVisible = false
cleanStyle.buttons.next.isVisible = false
cleanStyle.buttons.replay.isVisible = false

// Minimal seek bar
cleanStyle.seekBar.horizontalSpacing = 16
cleanStyle.seekBar.bottomSpacing = 12
cleanStyle.seekBar.playingState.height = 3
cleanStyle.seekBar.playingState.progressColor = UIColor.systemBlue
cleanStyle.seekBar.pausedState.height = 5

// Clean CTA
cleanStyle.cta.cornerRadius = 8
cleanStyle.cta.height = 36
cleanStyle.cta.font = UIFont.systemFont(ofSize: 14, weight: .medium)

Accessibility-focused player style

// Create an accessibility-focused player style
var accessibleStyle = BlazeVideosPlayerStyle.base()

// High contrast background
accessibleStyle.backgroundColor = UIColor.black

// Large, high contrast text
accessibleStyle.headingText.font = UIFont.systemFont(ofSize: 22, weight: .bold)
accessibleStyle.headingText.textColor = UIColor.white
accessibleStyle.headingText.numberOfLines = 3

// Large touch targets for buttons
accessibleStyle.buttons.playPause.width = 80
accessibleStyle.buttons.playPause.height = 80
accessibleStyle.buttons.playPause.color = UIColor.white

accessibleStyle.buttons.mute.width = 60
accessibleStyle.buttons.mute.height = 60
accessibleStyle.buttons.mute.color = UIColor.white

accessibleStyle.buttons.exit.width = 60
accessibleStyle.buttons.exit.height = 60
accessibleStyle.buttons.exit.color = UIColor.white

// High contrast seek bar
accessibleStyle.seekBar.playingState.height = 8
accessibleStyle.seekBar.playingState.progressColor = UIColor.systemYellow
accessibleStyle.seekBar.playingState.backgroundColor = UIColor.darkGray

accessibleStyle.seekBar.pausedState.height = 12
accessibleStyle.seekBar.pausedState.thumbSize = 20
accessibleStyle.seekBar.pausedState.thumbColor = UIColor.white
accessibleStyle.seekBar.pausedState.isThumbVisible = true

// Large CTA button
accessibleStyle.cta.height = 52
accessibleStyle.cta.font = UIFont.systemFont(ofSize: 18, weight: .bold)
accessibleStyle.cta.cornerRadius = 10

Usage with inline players

The BlazeVideosPlayerStyle can be used as the fullScreenPlayerStyle parameter in inline player modes:

// Use custom style for full-screen transitions from inline players
var customStyle = BlazeVideosPlayerStyle.base()
// ... customize style properties

// Interactive mode with custom full-screen style
let interactiveMode = BlazeVideosInlinePlayer.PlayerMode.interactive(
    interactivePlyerStyle: .base(),
    fullScreenPlayerStyle: customStyle
)

// Preview mode with custom full-screen style
let previewMode = BlazeVideosInlinePlayer.PlayerMode.preview(
    previewPlayerStyle: .base(),
    fullScreenPlayerStyle: customStyle
)

Best practices

Performance considerations

  • Modify styles before using them to avoid unnecessary updates
  • Keep style modifications grouped together for better code organization
  • Consider creating style presets for consistent theming across your app

Design guidelines

  • Ensure sufficient contrast between text/buttons and background colors
  • Maintain appropriate button sizes for touch targets
  • Test seek bar visibility and usability across different video content

Button visibility strategy

  • Show only relevant buttons for your content type and user flow
  • Consider hiding social buttons (share, like) if not needed for your use case
  • Always keep essential controls (playPause, exit) visible and accessible

Seek bar design

  • Use different styles for playing vs paused states to provide clear visual feedback
  • Ensure thumb is visible and appropriately sized during pause/seek operations
  • Choose progress colors that stand out against your video content
  • Test seek bar usability with various video backgrounds

CTA integration

  • Configure CTA visibility based on your content strategy
  • Use appropriate fonts and sizing for your target audience
  • Consider icon usage for enhanced visual communication
  • Test CTA timing and visibility across different video lengths

Updated 11 days ago

Did this page help you?