BlazeVideosInlinePreviewPlayerStyle - iOS

BlazeVideosInlinePreviewPlayerStyle is the style configuration for a preview inline video player. Preview mode is a lightweight video preview that transitions to full screen on tap, with only essential controls (mute and replay) — ideal for video feeds, thumbnails with playback preview, and scenarios where you want minimal UI overlay.

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

Getting started

Basic customization

// Get the base preview player style
var previewStyle = BlazeVideosInlinePreviewPlayerStyle.base()

// Customize basic properties
previewStyle.backgroundColor = UIColor.systemBackground
previewStyle.buttons.mute.color = UIColor.systemBlue
previewStyle.buttons.replay.isVisible = false

// Use the customized style with a player mode
let playerMode = BlazeVideosInlinePlayer.PlayerMode.preview(
    previewPlayerStyle: previewStyle
)

Button customization

// Get the base style
var previewStyle = BlazeVideosInlinePreviewPlayerStyle.base()

// Customize mute button
previewStyle.buttons.mute.color = UIColor.white
previewStyle.buttons.mute.width = 36
previewStyle.buttons.mute.height = 36
previewStyle.buttons.mute.isVisible = true

// Customize replay button
previewStyle.buttons.replay.color = UIColor.systemOrange
previewStyle.buttons.replay.width = 40
previewStyle.buttons.replay.height = 40
previewStyle.buttons.replay.isVisible = true

// Apply to player mode
let playerMode = BlazeVideosInlinePlayer.PlayerMode.preview(
    previewPlayerStyle: previewStyle
)

Properties

backgroundColor

var backgroundColor: UIColor

The background color of the video player's view container. This sets the background for the preview player.

// Set a semi-transparent dark background
previewStyle.backgroundColor = UIColor.black.withAlphaComponent(0.3)

// Set a solid background
previewStyle.backgroundColor = UIColor.systemBackground

// Set a custom color
previewStyle.backgroundColor = UIColor(red: 0.1, green: 0.1, blue: 0.1, alpha: 0.8)

buttons

var buttons: BlazeVideosInlinePreviewPlayerButtonsStyle

The button style configuration for the preview player's minimal controls. Preview mode includes only two buttons: mute and replay. Each 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

mute button

Controls audio muting functionality for the preview player.

// Customize mute button appearance
previewStyle.buttons.mute.color = UIColor.white
previewStyle.buttons.mute.width = 32
previewStyle.buttons.mute.height = 32
previewStyle.buttons.mute.isVisible = true
previewStyle.buttons.mute.contentHorizontalAlignment = .center
previewStyle.buttons.mute.contentVerticalAlignment = .center

replay button

Provides replay functionality when the video ends.

// Customize replay button appearance
previewStyle.buttons.replay.color = UIColor.systemBlue
previewStyle.buttons.replay.width = 44
previewStyle.buttons.replay.height = 44
previewStyle.buttons.replay.isVisible = true
previewStyle.buttons.replay.contentHorizontalAlignment = .center

Complete examples

Feed preview style

Perfect for video feeds where you want minimal UI overlay:

// Create a clean feed preview style
var feedPreviewStyle = BlazeVideosInlinePreviewPlayerStyle.base()

// Subtle background overlay
feedPreviewStyle.backgroundColor = UIColor.black.withAlphaComponent(0.2)

// Small, unobtrusive mute button
feedPreviewStyle.buttons.mute.color = UIColor.white
feedPreviewStyle.buttons.mute.width = 28
feedPreviewStyle.buttons.mute.height = 28
feedPreviewStyle.buttons.mute.isVisible = true

// Hide replay button for continuous feed experience
feedPreviewStyle.buttons.replay.isVisible = false

// Use with player mode
let playerMode = BlazeVideosInlinePlayer.PlayerMode.preview(
    previewPlayerStyle: feedPreviewStyle
)

Branded preview style

For branded content with custom colors:

// Create a branded preview style
var brandedStyle = BlazeVideosInlinePreviewPlayerStyle.base()

// Brand colors
let brandPrimary = UIColor.systemBlue
let brandSecondary = UIColor.systemOrange

// Branded background
brandedStyle.backgroundColor = UIColor.black.withAlphaComponent(0.4)

// Brand-colored mute button
brandedStyle.buttons.mute.color = brandPrimary
brandedStyle.buttons.mute.width = 36
brandedStyle.buttons.mute.height = 36

// Brand-colored replay button
brandedStyle.buttons.replay.color = brandSecondary
brandedStyle.buttons.replay.width = 40
brandedStyle.buttons.replay.height = 40

// Use with player mode
let playerMode = BlazeVideosInlinePlayer.PlayerMode.preview(
    previewPlayerStyle: brandedStyle
)

Minimal preview style

For the cleanest possible preview experience:

// Create an ultra-minimal preview style
var minimalStyle = BlazeVideosInlinePreviewPlayerStyle.base()

// Nearly transparent background
minimalStyle.backgroundColor = UIColor.clear

// Hide mute button for cleanest look
minimalStyle.buttons.mute.isVisible = false

// Small replay button only when needed
minimalStyle.buttons.replay.color = UIColor.white.withAlphaComponent(0.8)
minimalStyle.buttons.replay.width = 32
minimalStyle.buttons.replay.height = 32
minimalStyle.buttons.replay.isVisible = true

// Use with player mode
let playerMode = BlazeVideosInlinePlayer.PlayerMode.preview(
    previewPlayerStyle: minimalStyle
)

Sport highlights preview

Optimized for sports content previews:

// Create a sports-focused preview style
var sportsStyle = BlazeVideosInlinePreviewPlayerStyle.base()

// Sports-appropriate dark overlay
sportsStyle.backgroundColor = UIColor.black.withAlphaComponent(0.3)

// Visible mute control for variable audio content
sportsStyle.buttons.mute.color = UIColor.white
sportsStyle.buttons.mute.width = 34
sportsStyle.buttons.mute.height = 34
sportsStyle.buttons.mute.isVisible = true

// Prominent replay for highlight replays
sportsStyle.buttons.replay.color = UIColor.systemYellow
sportsStyle.buttons.replay.width = 42
sportsStyle.buttons.replay.height = 42
sportsStyle.buttons.replay.isVisible = true

// Use with player mode
let playerMode = BlazeVideosInlinePlayer.PlayerMode.preview(
    previewPlayerStyle: sportsStyle
)

Preview vs interactive mode

The preview mode is designed as a lightweight alternative to interactive mode:

Feature	Preview Mode	Interactive Mode
Purpose	Lightweight preview, tap to full screen	Full inline playback control
Controls	Mute, Replay only	All playback controls
Seek Bar	Not available	Fully customizable
Heading Text	Not available	Fully customizable
Performance	Optimized for feeds	Feature-rich experience
Use Cases	Video feeds, thumbnails, previews	Dedicated video players, full interaction

Best practices

When to use preview mode

Video feeds where space is limited
Thumbnail previews with playback capability
Content that primarily transitions to full screen
Performance-sensitive scenarios with multiple players
Social media style video feeds

Design guidelines

Size buttons appropriately for touch targets (minimum 32x32 points)
Test button visibility against various video content backgrounds

Performance optimization

Preview mode uses fewer resources than interactive mode
Consider using .placeholder embedded state initially for better scroll performance
Batch style modifications before applying to player mode

Accessibility

Ensure button colors have sufficient contrast against video content
Maintain minimum touch target sizes for usability
Consider providing alternative interaction methods for essential controls

Updated 11 days ago

Did this page help you?