BlazeVideosInlineInteractivePlayerStyle - iOS

BlazeVideosInlineInteractivePlayerStyle is the style configuration for an interactive inline video player. Interactive mode offers complete control over the player's appearance — heading text, button styles, background color, and seek bar — for full user interaction.

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

Getting started

Basic customization

// Get the base interactive player style
var interactiveStyle = BlazeVideosInlineInteractivePlayerStyle.base()

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

// Use the customized style with a player mode
let playerMode = BlazeVideosInlinePlayer.PlayerMode.interactive(
    interactivePlyerStyle: interactiveStyle
)

Advanced button customization

// Get the base style
var interactiveStyle = BlazeVideosInlineInteractivePlayerStyle.base()

// Customize individual buttons
interactiveStyle.buttons.playPause.color = UIColor.systemBlue
interactiveStyle.buttons.playPause.width = 50
interactiveStyle.buttons.playPause.height = 50

interactiveStyle.buttons.mute.color = UIColor.systemRed
interactiveStyle.buttons.mute.isVisible = true

interactiveStyle.buttons.fullScreen.color = UIColor.systemGreen
interactiveStyle.buttons.share.isVisible = false

// Apply to player mode
let playerMode = BlazeVideosInlinePlayer.PlayerMode.interactive(
    interactivePlyerStyle: interactiveStyle
)

Seek bar customization

// Get the base style
var interactiveStyle = BlazeVideosInlineInteractivePlayerStyle.base()

// Customize seek bar
interactiveStyle.seekBar.isVisible = true
interactiveStyle.seekBar.horizontalSpacing = 20
interactiveStyle.seekBar.bottomSpacing = 10

// Customize playing state
interactiveStyle.seekBar.playingState.progressColor = UIColor.systemBlue
interactiveStyle.seekBar.playingState.backgroundColor = UIColor.lightGray
interactiveStyle.seekBar.playingState.height = 4

// Customize paused state
interactiveStyle.seekBar.pausedState.progressColor = UIColor.systemOrange
interactiveStyle.seekBar.pausedState.thumbColor = UIColor.white
interactiveStyle.seekBar.pausedState.thumbSize = 12
interactiveStyle.seekBar.pausedState.isThumbVisible = true

// Apply to player mode
let playerMode = BlazeVideosInlinePlayer.PlayerMode.interactive(
    interactivePlyerStyle: interactiveStyle
)

Properties

backgroundColor

var backgroundColor: UIColor

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

interactiveStyle.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
interactiveStyle.headingText.font = UIFont.systemFont(ofSize: 18, weight: .bold)
interactiveStyle.headingText.textColor = UIColor.white
interactiveStyle.headingText.isVisible = true
interactiveStyle.headingText.numberOfLines = 2

buttons

var buttons: BlazeVideosInlineInteractivePlayerButtonsStyle

The button style configuration for all interactive player controls.

Each button (mute, share, like, playPause, previous, next, replay, fullScreen, seekForward, seekBackward) 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

// Customize play/pause button
interactiveStyle.buttons.playPause.color = UIColor.systemBlue
interactiveStyle.buttons.playPause.width = 44
interactiveStyle.buttons.playPause.height = 44
interactiveStyle.buttons.playPause.isVisible = true

// Customize mute button
interactiveStyle.buttons.mute.color = UIColor.systemRed
interactiveStyle.buttons.mute.isVisible = true

// Customize share button
interactiveStyle.buttons.share.color = UIColor.systemGreen
interactiveStyle.buttons.share.isVisible = false

// Customize like button
interactiveStyle.buttons.like.color = UIColor.systemPink
interactiveStyle.buttons.like.width = 32
interactiveStyle.buttons.like.height = 32

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

// Customize fullscreen button
interactiveStyle.buttons.fullScreen.color = UIColor.white
interactiveStyle.buttons.fullScreen.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
interactiveStyle.seekBar.isVisible = true
interactiveStyle.seekBar.horizontalSpacing = 16
interactiveStyle.seekBar.bottomSpacing = 8

// Playing state customization
interactiveStyle.seekBar.playingState.progressColor = UIColor.systemBlue
interactiveStyle.seekBar.playingState.backgroundColor = UIColor.lightGray
interactiveStyle.seekBar.playingState.height = 3
interactiveStyle.seekBar.playingState.cornerRadius = 1.5
interactiveStyle.seekBar.playingState.isThumbVisible = false

// Paused state customization
interactiveStyle.seekBar.pausedState.progressColor = UIColor.systemOrange
interactiveStyle.seekBar.pausedState.backgroundColor = UIColor.gray
interactiveStyle.seekBar.pausedState.height = 6
interactiveStyle.seekBar.pausedState.cornerRadius = 3
interactiveStyle.seekBar.pausedState.thumbColor = UIColor.white
interactiveStyle.seekBar.pausedState.thumbSize = 12
interactiveStyle.seekBar.pausedState.isThumbVisible = true

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.

Complete examples

Theme-based customization

// Create a dark theme interactive player
var darkThemeStyle = BlazeVideosInlineInteractivePlayerStyle.base()

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

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

// Set light colored buttons
darkThemeStyle.buttons.playPause.color = UIColor.white
darkThemeStyle.buttons.mute.color = UIColor.white
darkThemeStyle.buttons.fullScreen.color = UIColor.white
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

// Use with player mode
let playerMode = BlazeVideosInlinePlayer.PlayerMode.interactive(
    interactivePlyerStyle: darkThemeStyle
)

Sport-specific customization

// Create a sport-branded interactive player
var sportStyle = BlazeVideosInlineInteractivePlayerStyle.base()

// Team colors
let primaryColor = UIColor.systemBlue
let secondaryColor = UIColor.systemOrange

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

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

// Set team-colored buttons
sportStyle.buttons.playPause.color = primaryColor
sportStyle.buttons.playPause.width = 48
sportStyle.buttons.playPause.height = 48

sportStyle.buttons.mute.color = secondaryColor
sportStyle.buttons.share.color = primaryColor
sportStyle.buttons.like.color = UIColor.systemRed
sportStyle.buttons.fullScreen.color = UIColor.white

// Hide unnecessary buttons for sport content
sportStyle.buttons.previous.isVisible = false
sportStyle.buttons.next.isVisible = false

// Configure sport-themed seek bar
sportStyle.seekBar.playingState.progressColor = primaryColor
sportStyle.seekBar.pausedState.progressColor = secondaryColor
sportStyle.seekBar.pausedState.thumbColor = primaryColor

// Use with player mode
let playerMode = BlazeVideosInlinePlayer.PlayerMode.interactive(
    interactivePlyerStyle: sportStyle
)

Minimal controls setup

// Create a minimal interactive player
var minimalStyle = BlazeVideosInlineInteractivePlayerStyle.base()

// Clean background
minimalStyle.backgroundColor = UIColor.systemBackground

// Minimal heading
minimalStyle.headingText.font = UIFont.systemFont(ofSize: 14, weight: .medium)
minimalStyle.headingText.numberOfLines = 1

// Show only essential buttons
minimalStyle.buttons.playPause.isVisible = true
minimalStyle.buttons.fullScreen.isVisible = true

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

// Minimal seek bar
minimalStyle.seekBar.horizontalSpacing = 12
minimalStyle.seekBar.bottomSpacing = 4
minimalStyle.seekBar.playingState.height = 2
minimalStyle.seekBar.pausedState.height = 4

// Use with player mode
let playerMode = BlazeVideosInlinePlayer.PlayerMode.interactive(
    interactivePlyerStyle: minimalStyle
)

Best practices

Performance considerations

Modify styles before passing to the player mode 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 and background colors
Maintain consistent button sizes for better user experience
Test seek bar visibility and usability across different video content
Consider accessibility requirements when setting colors and sizes

Button visibility

Show only relevant buttons for your content type
Consider hiding social buttons (share, like) if not needed
Test button layouts on different screen sizes

// Start with the base interactive player style
var interactiveStyle = BlazeVideosInlineInteractivePlayerStyle.base()

// Customize the style properties
interactiveStyle.backgroundColor = .systemBackground
interactiveStyle.headingText.textColor = .white
interactiveStyle.headingText.font = UIFont.boldSystemFont(ofSize: 16)

// Customize specific buttons
interactiveStyle.buttons.playPause.color = .systemBlue
interactiveStyle.buttons.fullScreen.color = .systemGreen

// Customize the seek bar
interactiveStyle.seekBar.playingState.progressColor = .systemRed
interactiveStyle.seekBar.pausedState.thumbColor = .white

// Use the customized style when creating a player in interactive mode
let playerMode = BlazeVideosInlinePlayer.PlayerMode.interactive(
    interactivePlyerStyle: interactiveStyle,
    fullScreenPlayerStyle: nil // Uses SDK default for fullscreen
)

// Initialize the player with the custom style
let player = BlazeVideosInlinePlayer(
    playerMode: playerMode,
    dataSourceType: .labels(.singleLabel("NBA"))
)

// Embed the player with auto-play enabled
player.embedPlayer(
    in: containerViewController,
    containerView: videoContainerView,
    shouldAutoPlayOnStart: true
)

Updated 11 days ago

Did this page help you?