Player configurations (iOS)

We have the following three entries to open the player.

1. Video feed components: VideoFeedViewController/VideoFeedView/VideoFeedSwiftUIView

2. Story block components: StoryBlockViewController/StoryBlockView/StoryBlockSwiftUIView

3. openVideoPlayer API

When customizing the player, you need to handle the above entries if you use them.

Customize player styles

Customize player styles for video feed components

var config = VideoFeedContentConfiguration()

// Configure player style: fullBleed or fit
config.playerView.playerStyle = .fullBleed
// Controls how the player handles aspect ratio mismatches between
// the video content and its container
// - true:  Always respects `playerStyle`
// - false: Enforces aspect-fit (letterboxing) when the video and
//          container orientations or aspect ratios do not match
config.playerView.ignoreContentRatioMismatch = true

// Customize the video overlay CTA button style
config.playerView.ctaButton.contentConfiguration.backgroundColor = .black
config.playerView.ctaButton.contentConfiguration.textColor = .white
config.playerView.ctaButton.contentConfiguration.font = .systemFont(ofSize: 12)
config.playerView.ctaButton.contentConfiguration.shape = .oval

// Customize the style of Action button style, such as share button
config.playerView.actionButton.backgroundColor = .black
config.playerView.actionButton.textColor = .white
config.playerView.actionButton.separatorColor = .white
config.playerView.actionButton.shape = .oval

// Customize the style of cancel button style
config.playerView.cancelButton.backgroundColor = .black
config.playerView.cancelButton.textColor = .white
config.playerView.cancelButton.shape = .oval

// Specifies the appearance of the countdown timer
config.playerView.countdownTimerConfiguration.appearance = .light

// Configure the subtitle text color
config.playerView.subtitleConfiguration.textColor = .white
// Configure the subtitle background color
config.playerView.subtitleConfiguration.backgroundColor = .black

// Configure the background color of the ad badge.
// This also applies to video feed item.
config.adBadge.backgroundColor = .white
// Configure the text color of the ad badge
// This also applies to video feed item
config.adBadge.textColor = .black
// Configure the text(Sponsored or Ad) of the ad badge
// This also applies to video feed item
config.adBadge.badgeText = .ad

// Apply the changes for VideoFeedViewController instance
let feedVC = VideoFeedViewController()
feedVC.viewConfiguration = config

// Apply the changes for VideoFeedView instance
let videoFeedView = VideoFeedView()
videoFeedView.viewConfiguration = config

// Apply the changes for VideoFeedSwiftUIView instance
VideoFeedSwiftUIView(viewConfiguration: config)

Customize player styles for story block components

var config = StoryBlockConfiguration()

// Configure player style: fullBleed or fit for embedded mode
config.playerStyle = .fullBleed
// Control whether the player enforces aspect-fit (letterboxing) or respects playerStyle when video and container orientations mismatch (embedded mode)
config.ignoreContentRatioMismatch = false
// Configure player style: fullBleed or fit for fullscreen mode
config.fullScreenPlayerView.playerStyle = .fullBleed
// Control whether the player enforces aspect-fit (letterboxing) or respects playerStyle when video and container orientations mismatch (fullscreen mode)
config.fullScreenPlayerView.ignoreContentRatioMismatch = false

// Customize the video overlay CTA button style for embedded mode
config.ctaButton.contentConfiguration.backgroundColor = .black
config.ctaButton.contentConfiguration.textColor = .white
config.ctaButton.contentConfiguration.font = .systemFont(ofSize: 12)
config.ctaButton.contentConfiguration.shape = .oval
// Customize the video overlay CTA button style for fullscreen mode
config.fullScreenPlayerView.ctaButton.contentConfiguration.backgroundColor = .black
config.fullScreenPlayerView.ctaButton.contentConfiguration.textColor = .white
config.fullScreenPlayerView.ctaButton.contentConfiguration.font = .systemFont(ofSize: 12)
config.fullScreenPlayerView.ctaButton.contentConfiguration.shape = .oval

// Customize the style of action button style for embedded mode, such as share button
config.actionButton.backgroundColor = .black
config.actionButton.textColor = .white
config.actionButton.separatorColor = .white
config.actionButton.shape = .oval
// Customize the style of action button style for fullscreen mode, such as share button
config.fullScreenPlayerView.actionButton.backgroundColor = .black
config.fullScreenPlayerView.actionButton.textColor = .white
config.fullScreenPlayerView.actionButton.separatorColor = .white
config.fullScreenPlayerView.actionButton.shape = .oval

// Customize the style of cancel button style for embedded mode
config.cancelButton.backgroundColor = .black
config.cancelButton.textColor = .white
config.cancelButton.shape = .oval
// Customize the style of cancel button style for fullscreen mode
config.cancelButton.backgroundColor = .black
config.cancelButton.textColor = .white
config.cancelButton.shape = .oval

// Specifies the appearance of the countdown timer for embedded mode
config.countdownTimerConfiguration.appearance = .light
// Specifies the appearance of the countdown timer for fullscreen mode
config.fullScreenPlayerView.countdownTimerConfiguration.appearance = .light

// Configure the subtitle styles for embedded mode
config.subtitleConfiguration.textColor = .white
config.subtitleConfiguration.backgroundColor = .black
// Configure the subtitle styles for fullscreen mode
config.fullScreenPlayerView.subtitleConfiguration.textColor = .white
config.fullScreenPlayerView.subtitleConfiguration.backgroundColor = .black

// Configure the background color of the ad badge.
config.adBadge.backgroundColor = .white
// Configure the text color of the ad badge
config.adBadge.textColor = .black
// Configure the text(Sponsored or Ad) of the ad badge
config.adBadge.badgeText = .ad

// Apply the changes for StoryBlockViewController instance
let storyBlockVC = StoryBlockViewController()
storyBlockVC.viewConfiguration = config

// Apply the changes for VideoFeedView instance
let storyBlockView = StoryBlockView()
storyBlockView.viewConfiguration = config

// Apply the changes for StoryBlockSwiftUIView instance
StoryBlockSwiftUIView(viewConfiguration: config)

Customize player styles for circle story components

var config = CircleStoryContentConfiguration()

// Configure player style: fullBleed or fit
config.playerView.playerStyle = .fullBleed
// Controls how the player handles aspect ratio mismatches between
// the video content and its container
// - true:  Always respects `playerStyle`
// - false: Enforces aspect-fit (letterboxing) when the video and
//          container orientations or aspect ratios do not match
config.playerView.ignoreContentRatioMismatch = true

// Customize the video overlay CTA button style
config.playerView.ctaButton.contentConfiguration.backgroundColor = .black
config.playerView.ctaButton.contentConfiguration.textColor = .white
config.playerView.ctaButton.contentConfiguration.font = .systemFont(ofSize: 12)
config.playerView.ctaButton.contentConfiguration.shape = .oval

// Customize the style of Action button style, such as share button
config.playerView.actionButton.backgroundColor = .black
config.playerView.actionButton.textColor = .white
config.playerView.actionButton.separatorColor = .white
config.playerView.actionButton.shape = .oval

// Customize the style of cancel button style
config.playerView.cancelButton.backgroundColor = .black
config.playerView.cancelButton.textColor = .white
config.playerView.cancelButton.shape = .oval

// Specifies the appearance of the countdown timer
config.playerView.countdownTimerConfiguration.appearance = .light

// Configure the subtitle text color
config.playerView.subtitleConfiguration.textColor = .white
// Configure the subtitle background color
config.playerView.subtitleConfiguration.backgroundColor = .black

// Configure the background color of the ad badge.
// This also applies to video feed item.
config.adBadge.backgroundColor = .white
// Configure the text color of the ad badge
// This also applies to video feed item
config.adBadge.textColor = .black
// Configure the text(Sponsored or Ad) of the ad badge
// This also applies to video feed item
config.adBadge.badgeText = .ad

// Apply the changes for CircleStoryViewController instance
let circleVC = CircleStoryViewController()
circleVC.viewConfiguration = config

// Apply the changes for CircleStoryView instance
let circleStoryView = CircleStoryView()
circleStoryView.viewConfiguration = config

// Apply the changes for CircleStorySwiftUIView instance
CircleStorySwiftUIView(viewConfiguration: config)

Customize player styles for player deck components

var config = PlayerDeckContentConfiguration()

// Configure player style: fullBleed or fit
config.playerView.playerStyle = .fullBleed
// Controls how the player handles aspect ratio mismatches between
// the video content and its container
// - true:  Always respects `playerStyle`
// - false: Enforces aspect-fit (letterboxing) when the video and
//          container orientations or aspect ratios do not match
config.playerView.ignoreContentRatioMismatch = true

// Customize the video overlay CTA button style
config.playerView.ctaButton.contentConfiguration.backgroundColor = .black
config.playerView.ctaButton.contentConfiguration.textColor = .white
config.playerView.ctaButton.contentConfiguration.font = .systemFont(ofSize: 12)
config.playerView.ctaButton.contentConfiguration.shape = .oval

// Customize the style of Action button style, such as share button
config.playerView.actionButton.backgroundColor = .black
config.playerView.actionButton.textColor = .white
config.playerView.actionButton.separatorColor = .white
config.playerView.actionButton.shape = .oval

// Customize the style of cancel button style
config.playerView.cancelButton.backgroundColor = .black
config.playerView.cancelButton.textColor = .white
config.playerView.cancelButton.shape = .oval

// Specifies the appearance of the countdown timer
config.playerView.countdownTimerConfiguration.appearance = .light

// Configure the subtitle text color
config.playerView.subtitleConfiguration.textColor = .white
// Configure the subtitle background color
config.playerView.subtitleConfiguration.backgroundColor = .black

// Configure the background color of the ad badge.
// This also applies to video feed item.
config.adBadge.backgroundColor = .white
// Configure the text color of the ad badge
// This also applies to video feed item
config.adBadge.textColor = .black
// Configure the text(Sponsored or Ad) of the ad badge
// This also applies to video feed item
config.adBadge.badgeText = .ad

// Apply the changes for PlayerDeckView instance
let playerDeckView = PlayerDeckView()
playerDeckView.viewConfiguration = config

// Apply the changes for PlayerDeckSwiftUIView instance
PlayerDeckSwiftUIView(viewConfiguration: config)

Customize player styles for openVideoPlayer API

var config = VideoFeedContentConfiguration()

// Configure player style: fullBleed or fit
config.playerView.playerStyle = .fullBleed
// Controls how the player handles aspect ratio mismatches between
// the video content and its container
// - true:  Always respects `playerStyle`
// - false: Enforces aspect-fit (letterboxing) when the video and
//          container orientations or aspect ratios do not match
config.playerView.ignoreContentRatioMismatch = true

// Customize the video overlay CTA button style
config.playerView.ctaButton.contentConfiguration.backgroundColor = .black
config.playerView.ctaButton.contentConfiguration.textColor = .white
config.playerView.ctaButton.contentConfiguration.font = .systemFont(ofSize: 12)
config.playerView.ctaButton.contentConfiguration.shape = .oval

// Customize the style of Action button style, such as share button
config.playerView.actionButton.backgroundColor = .black
config.playerView.actionButton.textColor = .white
config.playerView.actionButton.separatorColor = .white
config.playerView.actionButton.shape = .oval

// Customize the style of cancel button style
config.playerView.cancelButton.backgroundColor = .black
config.playerView.cancelButton.textColor = .white
config.playerView.cancelButton.shape = .oval

// Specifies the appearance of the countdown timer
config.playerView.countdownTimerConfiguration.appearance = .light

// Configure the subtitle text color
config.playerView.subtitleConfiguration.textColor = .white
// Configure the subtitle background color
config.playerView.subtitleConfiguration.backgroundColor = .black

// Configure the background color of the ad badge.
config.adBadge.backgroundColor = .white
// Configure the text color of the ad badge
config.adBadge.textColor = .black
// Configure the text(Sponsored or Ad) of the ad badge
config.adBadge.badgeText = .ad

// Pass config to openVideoPlayer API
VideoFeedViewController.openVideoPlayer(with: url, config, self, true) { result in
    print("Open VideoPlayer result \(result)")
}

Enable PiP(Picture in Picture)

Set up the iOS project

To enable PiP outside the iOS app, you also need to add "Audio, Airplay, and Picture in Picture" background mode via Signing & Capabilities in your iOS project settings(as shown in the following screenshot). More information about this can be found here: Apple Documentation

Enable PiP for video feed components

// Enable PiP for VideoFeedViewController instance
let feedVC = VideoFeedViewController()
feedVC.isPictureInPictureEnabled = true

// Enable PiP for VideoFeedView instance
let videoFeedView = VideoFeedView()
videoFeedView.isPictureInPictureEnabled = true

// Enable PiP for VideoFeedSwiftUIView instance
VideoFeedSwiftUIView(isPictureInPictureEnabled: true)

Enable PiP for story block components

// Enable PiP for StoryBlockViewController instance
let storyBlockVC = StoryBlockViewController()
storyBlockVC.isPictureInPictureEnabled = true

// Enable PiP for StoryBlockView instance
let storyBlockView = StoryBlockView()
storyBlockView.isPictureInPictureEnabled = true

// Enable PiP for StoryBlockSwiftUIView instance
StoryBlockSwiftUIView(isPictureInPictureEnabled: true)

Enable PiP for circle story components

// Enable PiP for CircleStoryViewController instance
let circleVC = CircleStoryViewController()
circleVC.isPictureInPictureEnabled = true

// Enable PiP for CircleStoryView instance
let circleStoryView = CircleStoryView()
circleStoryView.isPictureInPictureEnabled = true

// Enable PiP for CircleStorySwiftUIView instance
CircleStorySwiftUIView(isPictureInPictureEnabled: true)

Enable PiP for player deck components

// Enable PiP for PlayerDeckView instance
let playerDeckView = PlayerDeckView()
playerDeckView.isPictureInPictureEnabled = true

// Enable PiP for PlayerDeckSwiftUIView instance
PlayerDeckSwiftUIView(isPictureInPictureEnabled: true)

Enable PiP for openVideoPlayer API

// Pass true to the fourth parameter
VideoFeedViewController.openVideoPlayer(with: url, config, self, true) { result in
    print("Open VideoPlayer result \(result)")
}

Enable horizontal full-screen player

Set up iOS project

As illustrated in the screenshot below, you need to include landscape orientations in your iOS project's Info.plist file.

Enable horizontal full-screen player for video feed components

var config = VideoFeedContentConfiguration()

// Specifies if horizontal layout is enabled
// When enabled, the video player will be displayed in horizontal layout 
// when users rotate the device to landscape mode
config.playerView.horizontalLayout.isEnabled = true

// Apply the changes for VideoFeedViewController instance
let feedVC = VideoFeedViewController()
feedVC.viewConfiguration = config

// Apply the changes for VideoFeedView instance
let videoFeedView = VideoFeedView()
videoFeedView.viewConfiguration = config

// Apply the changes for VideoFeedSwiftUIView instance
VideoFeedSwiftUIView(viewConfiguration: config)

Enable horizontal full-screen player for story block components

var config = StoryBlockConfiguration()

// Specifies if horizontal layout is enabled
// When enabled, the video player will be displayed in horizontal layout 
// when users rotate the device to landscape mode
config.fullScreenPlayerView.horizontalLayout.isEnabled = true

// Apply the changes for StoryBlockViewController instance
let storyBlockVC = StoryBlockViewController()
storyBlockVC.viewConfiguration = config

// Apply the changes for VideoFeedView instance
let storyBlockView = StoryBlockView()
storyBlockView.viewConfiguration = config

// Apply the changes for StoryBlockSwiftUIView instance
StoryBlockSwiftUIView(viewConfiguration: config)

Enable horizontal full-screen player for circle story components

var config = CircleStoryContentConfiguration()

// Specifies if horizontal layout is enabled
// When enabled, the video player will be displayed in horizontal layout 
// when users rotate the device to landscape mode
config.playerView.horizontalLayout.isEnabled = true

// Apply the changes for CircleStoryViewController instance
let circleVC = CircleStoryViewController()
circleVC.viewConfiguration = config

// Apply the changes for CircleStoryView instance
let circleStoryView = CircleStoryView()
circleStoryView.viewConfiguration = config

// Apply the changes for CircleStorySwiftUIView instance
CircleStorySwiftUIView(viewConfiguration: config)

Enable horizontal full-screen player for player deck components

var config = PlayerDeckContentConfiguration()

// Specifies if horizontal layout is enabled
// When enabled, the video player will be displayed in horizontal layout 
// when users rotate the device to landscape mode
config.playerView.horizontalLayout.isEnabled = true

// Apply the changes for PlayerDeckView instance
let playerDeckView = PlayerDeckView()
playerDeckView.viewConfiguration = config

// Apply the changes for PlayerDeckSwiftUIView instance
PlayerDeckSwiftUIView(viewConfiguration: config)

Enable horizontal full-screen player for openVideoPlayer API

var config = VideoFeedContentConfiguration()

// Specifies if horizontal layout is enabled
// When enabled, the video player will be displayed in horizontal layout 
// when users rotate the device to landscape mode
config.playerView.horizontalLayout.isEnabled = true

VideoFeedViewController.openVideoPlayer(with: url, config, self, true) { result in
    print("Open VideoPlayer result \(result)")
}

Enable vertical scrolling for player

Configuration for video feed component

var config = VideoFeedContentConfiguration()

// Use vertical scroll direction
config.playerView.scrollDirection = .vertical

// Apply the changes for VideoFeedViewController instance
let feedVC = VideoFeedViewController()
feedVC.viewConfiguration = config

// Apply the changes for VideoFeedView instance
let videoFeedView = VideoFeedView()
videoFeedView.viewConfiguration = config

// Apply the changes for VideoFeedSwiftUIView instance
VideoFeedSwiftUIView(viewConfiguration: config)

Configuration for story block component

var config = StoryBlockConfiguration()

// Use vertical scroll direction for embedded mode
config.scrollDirection = .vertical
// By default, vertical scroll gestures are disabled in StoryBlock's embedded mode when scrollDirection is set to vertical.
// This prevents gesture conflicts when StoryBlock is embedded inside a vertically scrolling container (e.g. UIScrollView).
// Users can still navigate between items using the up/down arrow buttons.
// If your layout does not include a vertical scroll view, you can enable vertical scroll gestures manually using the code below.
config.enableScrollForVertical = true

// Use vertical scroll direction for fullscreen mode
config.fullScreenPlayerView.scrollDirection = .vertical

// Apply the changes for StoryBlockViewController instance
let storyBlockVC = StoryBlockViewController()
storyBlockVC.viewConfiguration = config

// Apply the changes for VideoFeedView instance
let storyBlockView = StoryBlockView()
storyBlockView.viewConfiguration = config

// Apply the changes for StoryBlockSwiftUIView instance
StoryBlockSwiftUIView(viewConfiguration: config)

Configuration for circle story component

var config = CircleStoryContentConfiguration()

// Use vertical scroll direction
config.playerView.scrollDirection = .vertical

// Apply the changes for CircleStoryViewController instance
let circleVC = CircleStoryViewController()
circleVC.viewConfiguration = config

// Apply the changes for CircleStoryView instance
let circleStoryView = CircleStoryView()
circleStoryView.viewConfiguration = config

// Apply the changes for VideoFeedSwiftUIView instance
CircleStorySwiftUIView(viewConfiguration: config)

Configuration for player deck component

var config = PlayerDeckContentConfiguration()

// Use vertical scroll direction
config.playerView.scrollDirection = .vertical

// Apply the changes for PlayerDeckView instance
let playerDeckView = PlayerDeckView()
playerDeckView.viewConfiguration = config

// Apply the changes for PlayerDeckSwiftUIView instance
PlayerDeckSwiftUIView(viewConfiguration: config)

Configuration for openVideoPlayer API

var config = VideoFeedContentConfiguration()

// Use vertical scroll direction
config.playerView.scrollDirection = .vertical

VideoFeedViewController.openVideoPlayer(with: url, config, self, true) { result in
    print("Open VideoPlayer result \(result)")
}

Hiding product cards for short video and trailer

By default, product cards are shown when a video or trailer has associated products. However, you can override this behavior and hide the product cards—even if the linked products exist—by using the following code snippets.

Code snippets for video feed component

var config = VideoFeedContentConfiguration()

// Hide product card for short video and trailer
config.playerView.productCard.isHidden = true

// Apply the changes for VideoFeedViewController instance
let feedVC = VideoFeedViewController()
feedVC.viewConfiguration = config

// Apply the changes for VideoFeedView instance
let videoFeedView = VideoFeedView()
videoFeedView.viewConfiguration = config

// Apply the changes for VideoFeedSwiftUIView instance
VideoFeedSwiftUIView(viewConfiguration: config)

Code snippets for story block component

var config = StoryBlockConfiguration()

// Hide product card for short video and trailer in embedded mode
config.productCard.isHidden = true
// Hide product card for short video and trailer in fullscreen mode
config.fullScreenPlayerView.productCard.isHidden = true

// Apply the changes for StoryBlockViewController instance
let storyBlockVC = StoryBlockViewController()
storyBlockVC.viewConfiguration = config

// Apply the changes for VideoFeedView instance
let storyBlockView = StoryBlockView()
storyBlockView.viewConfiguration = config

// Apply the changes for StoryBlockSwiftUIView instance
StoryBlockSwiftUIView(viewConfiguration: config)

Code snippets for circle story component

var config = CircleStoryContentConfiguration()

// Hide product card for short video and trailer
config.playerView.productCard.isHidden = true

// Apply the changes for CircleStoryViewController instance
let circleVC = CircleStoryViewController()
circleVC.viewConfiguration = config

// Apply the changes for CircleStoryView instance
let circleStoryView = CircleStoryView()
circleStoryView.viewConfiguration = config

// Apply the changes for CircleStorySwiftUIView instance
CircleStorySwiftUIView(viewConfiguration: config)

Code snippets for player deck component

var config = PlayerDeckContentConfiguration()

// Hide product card for short video and trailer
config.playerView.productCard.isHidden = true

// Apply the changes for PlayerDeckView instance
let playerDeckView = PlayerDeckView()
playerDeckView.viewConfiguration = config

// Apply the changes for PlayerDeckSwiftUIView instance
PlayerDeckSwiftUIView(viewConfiguration: config)

Code snippets for openVideoPlayer API

var config = VideoFeedContentConfiguration()

// Hide product card for short video and trailer
config.playerView.productCard.isHidden = true

VideoFeedViewController.openVideoPlayer(with: url, config, self, true) { result in
    print("Open VideoPlayer result \(result)")
}

Customize social attribution

The social attribution label shows the source of the video. You can customize the font size and font weight of this label.

Customize social attribution for video feed components

var config = VideoFeedContentConfiguration()

// Configure the font size of the social attribution label
config.playerView.socialAttribution.fontSize = 12
// Configure the font weight of the social attribution label
config.playerView.socialAttribution.fontWeight = .semibold

// Apply the changes for VideoFeedViewController instance
let feedVC = VideoFeedViewController()
feedVC.viewConfiguration = config

// Apply the changes for VideoFeedView instance
let videoFeedView = VideoFeedView()
videoFeedView.viewConfiguration = config

// Apply the changes for VideoFeedSwiftUIView instance
VideoFeedSwiftUIView(viewConfiguration: config)

Customize social attribution for story block components

Only available for fullscreen mode.

var config = StoryBlockConfiguration()

// Configure the font size of the social attribution label for fullscreen mode
config.fullScreenPlayerView.socialAttribution.fontSize = 12
// Configure the font weight of the social attribution label for fullscreen mode
config.fullScreenPlayerView.socialAttribution.fontWeight = .semibold

// Apply the changes for StoryBlockViewController instance
let storyBlockVC = StoryBlockViewController()
storyBlockVC.viewConfiguration = config

// Apply the changes for StoryBlockView instance
let storyBlockView = StoryBlockView()
storyBlockView.viewConfiguration = config

// Apply the changes for StoryBlockSwiftUIView instance
StoryBlockSwiftUIView(viewConfiguration: config)

Customize social attribution for circle story components

var config = CircleStoryContentConfiguration()

// Configure the font size of the social attribution label
config.playerView.socialAttribution.fontSize = 12
// Configure the font weight of the social attribution label
config.playerView.socialAttribution.fontWeight = .semibold

// Apply the changes for CircleStoryViewController instance
let circleVC = CircleStoryViewController()
circleVC.viewConfiguration = config

// Apply the changes for CircleStoryView instance
let circleStoryView = CircleStoryView()
circleStoryView.viewConfiguration = config

// Apply the changes for CircleStorySwiftUIView instance
CircleStorySwiftUIView(viewConfiguration: config)

Customize social attribution for player deck components

var config = PlayerDeckContentConfiguration()

// Configure the font size of the social attribution label on the player deck item
config.itemView.socialAttribution.fontSize = 10
// Configure the font weight of the social attribution label on the player deck item
config.itemView.socialAttribution.fontWeight = .semibold
// Configure the font size of the social attribution label on the player
config.playerView.socialAttribution.fontSize = 12
// Configure the font weight of the social attribution label on the player
config.playerView.socialAttribution.fontWeight = .semibold

// Apply the changes for PlayerDeckView instance
let playerDeckView = PlayerDeckView()
playerDeckView.viewConfiguration = config

// Apply the changes for PlayerDeckSwiftUIView instance
PlayerDeckSwiftUIView(viewConfiguration: config)

Customize social attribution for openVideoPlayer API

var config = VideoFeedContentConfiguration()

// Configure the font size of the social attribution label
config.playerView.socialAttribution.fontSize = 12
// Configure the font weight of the social attribution label
config.playerView.socialAttribution.fontWeight = .semibold

VideoFeedViewController.openVideoPlayer(with: url, config, self, true) { result in
    print("Open VideoPlayer result \(result)")
}

Customize product indicator

The product indicator is shown on the fullscreen player when a video has multiple associated products. You can customize the height and width of the selected and unselected indicators.

Note: selectedHeight and unselectedHeight are capped at 27. If width exceeds the available layout constraints, it will be automatically adjusted to an appropriate width.

Customize product indicator for video feed components

var config = VideoFeedContentConfiguration()

// Configure the height of the selected indicator (default 3, max 27)
config.playerView.productIndicator.selectedHeight = 3
// Configure the height of the unselected indicator (default 1, max 27)
config.playerView.productIndicator.unselectedHeight = 1
// Configure the width of the selected indicator (default 30)
config.playerView.productIndicator.width = 30

// Apply the changes for VideoFeedViewController instance
let feedVC = VideoFeedViewController()
feedVC.viewConfiguration = config

// Apply the changes for VideoFeedView instance
let videoFeedView = VideoFeedView()
videoFeedView.viewConfiguration = config

// Apply the changes for VideoFeedSwiftUIView instance
VideoFeedSwiftUIView(viewConfiguration: config)

Customize product indicator for story block components

Only available for fullscreen mode.

var config = StoryBlockConfiguration()

// Configure the height of the selected indicator for fullscreen mode (default 3, max 27)
config.fullScreenPlayerView.productIndicator.selectedHeight = 3
// Configure the height of the unselected indicator for fullscreen mode (default 1, max 27)
config.fullScreenPlayerView.productIndicator.unselectedHeight = 1
// Configure the width of the selected indicator for fullscreen mode (default 30)
config.fullScreenPlayerView.productIndicator.width = 30

// Apply the changes for StoryBlockViewController instance
let storyBlockVC = StoryBlockViewController()
storyBlockVC.viewConfiguration = config

// Apply the changes for StoryBlockView instance
let storyBlockView = StoryBlockView()
storyBlockView.viewConfiguration = config

// Apply the changes for StoryBlockSwiftUIView instance
StoryBlockSwiftUIView(viewConfiguration: config)

Customize product indicator for circle story components

var config = CircleStoryContentConfiguration()

// Configure the height of the selected indicator (default 3, max 27)
config.playerView.productIndicator.selectedHeight = 3
// Configure the height of the unselected indicator (default 1, max 27)
config.playerView.productIndicator.unselectedHeight = 1
// Configure the width of the selected indicator (default 30)
config.playerView.productIndicator.width = 30

// Apply the changes for CircleStoryViewController instance
let circleVC = CircleStoryViewController()
circleVC.viewConfiguration = config

// Apply the changes for CircleStoryView instance
let circleStoryView = CircleStoryView()
circleStoryView.viewConfiguration = config

// Apply the changes for CircleStorySwiftUIView instance
CircleStorySwiftUIView(viewConfiguration: config)

Customize product indicator for player deck components

var config = PlayerDeckContentConfiguration()

// Configure the height of the selected indicator (default 3, max 27)
config.playerView.productIndicator.selectedHeight = 3
// Configure the height of the unselected indicator (default 1, max 27)
config.playerView.productIndicator.unselectedHeight = 1
// Configure the width of the selected indicator (default 30)
config.playerView.productIndicator.width = 30

// Apply the changes for PlayerDeckView instance
let playerDeckView = PlayerDeckView()
playerDeckView.viewConfiguration = config

// Apply the changes for PlayerDeckSwiftUIView instance
PlayerDeckSwiftUIView(viewConfiguration: config)

Customize product indicator for openVideoPlayer API

var config = VideoFeedContentConfiguration()

// Configure the height of the selected indicator (default 3, max 27)
config.playerView.productIndicator.selectedHeight = 3
// Configure the height of the unselected indicator (default 1, max 27)
config.playerView.productIndicator.unselectedHeight = 1
// Configure the width of the selected indicator (default 30)
config.playerView.productIndicator.width = 30

VideoFeedViewController.openVideoPlayer(with: url, config, self, true) { result in
    print("Open VideoPlayer result \(result)")
}

Customize player icons

Set up iOS project

Add the custom icons to the asset catalogs(e.g. Images.xcassets, Assets.xcassets or other names) in your iOS project. Such as:

Customize player icons for video feed components

var config = VideoFeedContentConfiguration()

// Customize the play icon
config.playerView.playbackButton.playDisplay.displayMode = .image(someImage)
// Customize the pause icon
config.playerView.playbackButton.pauseDisplay.displayMode = .image(someImage)
// Customize the more option icon
config.playerView.videoDetailButtonDisplayConfiguration.displayMode = .image(someImage)
// Customize the mute icon
config.playerView.muteButton.muteDisplay.displayMode = .image(someImage)
// Customize the unmute icon
config.playerView.muteButton.unmuteDisplay.displayMode = .image(someImage)
// Customize the close icon
config.playerView.closeButtonConfiguration.closeDisplay.displayMode = .image(someImage)
// Customize the pip icon
config.playerView.pipButtonConfiguration.pipDisplay.displayMode = .image(someImage)
// Customize the subtitle on icon
config.playerView.subtitleConfiguration.subtitleButton.subtitleOnDisplay.displayMode = .image(someImage)
// Customize the subtitle off icon
config.playerView.subtitleConfiguration.subtitleButton.subtitleOffDisplay.displayMode = .image(someImage)

// Apply the changes for VideoFeedViewController instance
let feedVC = VideoFeedViewController()
feedVC.viewConfiguration = config

// Apply the changes for VideoFeedView instance
let videoFeedView = VideoFeedView()
videoFeedView.viewConfiguration = config

// Apply the changes for VideoFeedSwiftUIView instance
VideoFeedSwiftUIView(viewConfiguration: config)

Customize player icons for story block components

var config = StoryBlockConfiguration()

// Customize the play icon for embedded mode
config.playbackButton.playDisplay.displayMode = .image(someImage)
// Customize the pause icon for embedded mode
config.playbackButton.pauseDisplay.displayMode = .image(someImage)
// Customize the more option icon for embedded mode
config.videoDetailButtonDisplayConfiguration.displayMode = .image(someImage)
// Customize the mute icon for embedded mode
config.muteButton.muteDisplay.displayMode = .image(someImage)
// Customize the unmute icon for embedded mode
config.muteButton.unmuteDisplay.displayMode = .image(someImage)
// Customize the subtitle on icon for embedded mode
configrView.subtitleConfiguration.subtitleButton.subtitleOnDisplay.displayMode = .image(someImage)

// Customize the play icon for fullscreen mode
config.fullScreenPlayerView.playbackButton.playDisplay.displayMode = .image(someImage)
// Customize the pause icon for fullscreen mode
config.fullScreenPlayerView.playbackButton.pauseDisplay.displayMode = .image(someImage)
// Customize the more option icon for fullscreen mode
config.fullScreenPlayerView.videoDetailButtonDisplayConfiguration.displayMode = .image(someImage)
// Customize the mute icon for fullscreen mode
config.fullScreenPlayerView.muteButton.muteDisplay.displayMode = .image(someImage)
// Customize the unmute icon for fullscreen mode
config.fullScreenPlayerView.muteButton.unmuteDisplay.displayMode = .image(someImage)
// Customize the close icon for fullscreen mode
config.fullScreenPlayerView.closeButtonConfiguration.closeDisplay.displayMode = .image(someImage)
// Customize the pip icon for fullscreen mode
config.fullScreenPlayerView.pipButtonConfiguration.pipDisplay.displayMode = .image(someImage)
// Customize the subtitle off icon
config.fullScreenPlayerView.subtitleConfiguration.subtitleButton.subtitleOffDisplay.displayMode = .image(someImage)

// Apply the changes for StoryBlockViewController instance
let storyBlockVC = StoryBlockViewController()
storyBlockVC.viewConfiguration = config

// Apply the changes for VideoFeedView instance
let storyBlockView = StoryBlockView()
storyBlockView.viewConfiguration = config

// Apply the changes for StoryBlockSwiftUIView instance
StoryBlockSwiftUIView(viewConfiguration: config)

Customize player icons for circle story components

var config = CircleStoryContentConfiguration()

// Customize the play icon
config.playerView.playbackButton.playDisplay.displayMode = .image(someImage)
// Customize the pause icon
config.playerView.playbackButton.pauseDisplay.displayMode = .image(someImage)
// Customize the more option icon
config.playerView.videoDetailButtonDisplayConfiguration.displayMode = .image(someImage)
// Customize the mute icon
config.playerView.muteButton.muteDisplay.displayMode = .image(someImage)
// Customize the unmute icon
config.playerView.muteButton.unmuteDisplay.displayMode = .image(someImage)
// Customize the close icon
config.playerView.closeButtonConfiguration.closeDisplay.displayMode = .image(someImage)
// Customize the pip icon
config.playerView.pipButtonConfiguration.pipDisplay.displayMode = .image(someImage)
// Customize the subtitle on icon
config.playerView.subtitleConfiguration.subtitleButton.subtitleOnDisplay.displayMode = .image(someImage)
// Customize the subtitle off icon
config.playerView.subtitleConfiguration.subtitleButton.subtitleOffDisplay.displayMode = .image(someImage)

// Apply the changes for CircleStoryViewController instance
let circleVC = CircleStoryViewController()
circleVC.viewConfiguration = config

// Apply the changes for CircleStoryView instance
let circleStoryView = CircleStoryView()
circleStoryView.viewConfiguration = config

// Apply the changes for CircleStorySwiftUIView instance
CircleStorySwiftUIView(viewConfiguration: config)

Customize player icons for player deck components

var config = PlayerDeckContentConfiguration()

// Customize the play icon
config.playerView.playbackButton.playDisplay.displayMode = .image(someImage)
// Customize the pause icon
config.playerView.playbackButton.pauseDisplay.displayMode = .image(someImage)
// Customize the more option icon
config.playerView.videoDetailButtonDisplayConfiguration.displayMode = .image(someImage)
// Customize the mute icon
config.playerView.muteButton.muteDisplay.displayMode = .image(someImage)
// Customize the unmute icon
config.playerView.muteButton.unmuteDisplay.displayMode = .image(someImage)
// Customize the close icon
config.playerView.closeButtonConfiguration.closeDisplay.displayMode = .image(someImage)
// Customize the pip icon
config.playerView.pipButtonConfiguration.pipDisplay.displayMode = .image(someImage)
// Customize the subtitle on icon
config.playerView.subtitleConfiguration.subtitleButton.subtitleOnDisplay.displayMode = .image(someImage)
// Customize the subtitle off icon
config.playerView.subtitleConfiguration.subtitleButton.subtitleOffDisplay.displayMode = .image(someImage)

// Apply the changes for PlayerDeckView instance
let playerDeckView = PlayerDeckView()
playerDeckView.viewConfiguration = config

// Apply the changes for PlayerDeckSwiftUIView instance
PlayerDeckSwiftUIView(viewConfiguration: config)

Customize player icons for openVideoPlayer API

var config = VideoFeedContentConfiguration()

// Customize the play icon
config.playerView.playbackButton.playDisplay.displayMode = .image(someImage)
// Customize the pause icon
config.playerView.playbackButton.pauseDisplay.displayMode = .image(someImage)
// Customize the more option icon
config.playerView.videoDetailButtonDisplayConfiguration.displayMode = .image(someImage)
// Customize the mute icon
config.playerView.muteButton.muteDisplay.displayMode = .image(someImage)
// Customize the unmute icon
config.playerView.muteButton.unmuteDisplay.displayMode = .image(someImage)
// Customize the close icon
config.playerView.closeButtonConfiguration.closeDisplay.displayMode = .image(someImage)
// Customize the pip icon
config.playerView.pipButtonConfiguration.pipDisplay.displayMode = .image(someImage)
// Customize the subtitle on icon
config.playerView.subtitleConfiguration.subtitleButton.subtitleOnDisplay.displayMode = .image(someImage)
// Customize the subtitle off icon
config.playerView.subtitleConfiguration.subtitleButton.subtitleOffDisplay.displayMode = .image(someImage)

// Pass config to openVideoPlayer API
VideoFeedViewController.openVideoPlayer(with: url, config, self, true) { result in
    print("Open VideoPlayer result \(result)")
}

Customize player logo

To display the channel logo instead of the more icon (three dots) in the player, you could refer to the following code snippets.

Customize player logo for video feed components

var config = VideoFeedContentConfiguration()

// Configure the channel id of logo
config.playerView.logoConfiguration.option = .creator("your encoded channel id")

// Apply the changes for VideoFeedViewController instance
let feedVC = VideoFeedViewController()
feedVC.viewConfiguration = config

// Apply the changes for VideoFeedView instance
let videoFeedView = VideoFeedView()
videoFeedView.viewConfiguration = config

// Apply the changes for VideoFeedSwiftUIView instance
VideoFeedSwiftUIView(viewConfiguration: config)

Customize player logo for story block components

var config = StoryBlockConfiguration()

// Configure the channel id of logo for embedded mode
config.logoConfiguration.option = .creator("your encoded channel id")
// Configure the channel id of logo for fullscreen mode
config.fullScreenPlayerView.logoConfiguration.option = .creator("your encoded channel id")

// Apply the changes for StoryBlockViewController instance
let storyBlockVC = StoryBlockViewController()
storyBlockVC.viewConfiguration = config

// Apply the changes for VideoFeedView instance
let storyBlockView = StoryBlockView()
storyBlockView.viewConfiguration = config

// Apply the changes for StoryBlockSwiftUIView instance
StoryBlockSwiftUIView(viewConfiguration: config)

Customize player logo for circle story components

var config = CircleStoryContentConfiguration()

// Configure the channel id of logo
config.playerView.logoConfiguration.option = .creator("your encoded channel id")

// Apply the changes for CircleStoryViewController instance
let circleVC = CircleStoryViewController()
circleVC.viewConfiguration = config

// Apply the changes for VideoFeedView instance
let circleStoryView = CircleStoryView()
circleStoryView.viewConfiguration = config

// Apply the changes for CircleStorySwiftUIView instance
CircleStorySwiftUIView(viewConfiguration: config)

Customize player logo for player deck components

var config = PlayerDeckContentConfiguration()

// Configure the channel id of logo
config.playerView.logoConfiguration.option = .creator("your encoded channel id")

// Apply the changes for PlayerDeckView instance
let playerDeckView = PlayerDeckView()
playerDeckView.viewConfiguration = config

// Apply the changes for PlayerDeckSwiftUIView instance
PlayerDeckSwiftUIView(viewConfiguration: config)

Customize player logo for openVideoPlayer API

var config = VideoFeedContentConfiguration()

// Configure the channel id of logo
config.playerView.logoConfiguration.option = .creator("your encoded channel id")

// Pass config to openVideoPlayer API
VideoFeedViewController.openVideoPlayer(with: url, config, self, true) { result in
    print("Open VideoPlayer result \(result)")
}

Customize share base URL

Customize share base URL for video feed components

var config = VideoFeedContentConfiguration()

config.playerView.shareButton.behavior.baseURL = URL(string: "<Base URL for your Universal Link or Deeplink>")

// Apply the changes for VideoFeedViewController instance
let feedVC = VideoFeedViewController()
feedVC.viewConfiguration = config

// Apply the changes for VideoFeedView instance
let videoFeedView = VideoFeedView()
videoFeedView.viewConfiguration = config

// Apply the changes for VideoFeedSwiftUIView instance
VideoFeedSwiftUIView(viewConfiguration: config)

Customize share base URL for story block components

var config = StoryBlockConfiguration()

// Specifies custom base URL for use in the sharing link for the video for embedded mode
config.shareButton.behavior.baseURL = URL(string: "<Base URL for your Universal Link or Deeplink>")
// Specifies custom base URL for use in the sharing link for the video for embedded mode
config.fullScreenPlayerView.shareButton.behavior.baseURL = URL(string: "<Base URL for your Universal Link or Deeplink>")

// Apply the changes for StoryBlockViewController instance
let storyBlockVC = StoryBlockViewController()
storyBlockVC.viewConfiguration = config

// Apply the changes for VideoFeedView instance
let storyBlockView = StoryBlockView()
storyBlockView.viewConfiguration = config

// Apply the changes for StoryBlockSwiftUIView instance
StoryBlockSwiftUIView(viewConfiguration: config)

Customize share base URL for circle story components

var config = CircleStoryContentConfiguration()

config.playerView.shareButton.behavior.baseURL = URL(string: "<Base URL for your Universal Link or Deeplink>")

// Apply the changes for CircleStoryViewController instance
let circleVC = CircleStoryViewController()
circleVC.viewConfiguration = config

// Apply the changes for CircleStoryView instance
let circleStoryView = CircleStoryView()
circleStoryView.viewConfiguration = config

// Apply the changes for CircleStorySwiftUIView instance
CircleStorySwiftUIView(viewConfiguration: config)

Customize share base URL for player deck components

var config = PlayerDeckContentConfiguration()

config.playerView.shareButton.behavior.baseURL = URL(string: "<Base URL for your Universal Link or Deeplink>")

// Apply the changes for PlayerDeckView instance
let videoFeedView = PlayerDeckView()
videoFeedView.viewConfiguration = config

// Apply the changes for PlayerDeckSwiftUIView instance
PlayerDeckSwiftUIView(viewConfiguration: config)

Customize share base URL for openVideoPlayer API

var config = VideoFeedContentConfiguration()

// Specifies custom base URL for use in the sharing link for the video
config.playerView.shareButton.behavior.baseURL = URL(string: "<Base URL for your Universal Link or Deeplink>")

VideoFeedViewController.openVideoPlayer(with: url, config, self, true) { result in
    print("Open VideoPlayer result \(result)")
}

Configure video/feed complete actions

Configure video/feed complete actions for video feed components

var config = VideoFeedContentConfiguration()

// Configure the video complete action: advanceToNext or loop
config.playerView.videoCompleteAction = .advanceToNext
// Configure the feed complete action: loop or dismiss
config.playerView.feedCompleteAction = .loop

// Apply the changes for VideoFeedViewController instance
let feedVC = VideoFeedViewController()
feedVC.viewConfiguration = config

// Apply the changes for VideoFeedView instance
let videoFeedView = VideoFeedView()
videoFeedView.viewConfiguration = config

// Apply the changes for VideoFeedSwiftUIView instance
VideoFeedSwiftUIView(viewConfiguration: config)

Configure video/feed complete actions for story block components

Only available for fullscreen mode.

var config = StoryBlockConfiguration()

// Configure the video complete action: advanceToNext or loop for fullscreen mode
config.fullScreenPlayerView.videoCompleteAction = .advanceToNext
// Configure the feed complete action: loop or dismiss for fullscreen mode
config.fullScreenPlayerView.feedCompleteAction = .loop

// Apply the changes for StoryBlockViewController instance
let storyBlockVC = StoryBlockViewController()
storyBlockVC.viewConfiguration = config

// Apply the changes for StoryBlockView instance
let storyBlockView = StoryBlockView()
storyBlockView.viewConfiguration = config

// Apply the changes for StoryBlockSwiftUIView instance
StoryBlockSwiftUIView(viewConfiguration: config)

Configure video/feed complete actions for circle story components

var config = CircleStoryContentConfiguration()

// Configure the video complete action: advanceToNext or loop
config.playerView.videoCompleteAction = .advanceToNext
// Configure the feed complete action: loop or dismiss
config.playerView.feedCompleteAction = .loop

// Apply the changes for CircleStoryViewController instance
let circleVC = CircleStoryViewController()
circleVC.viewConfiguration = config

// Apply the changes for CircleStoryView instance
let circleStoryView = CircleStoryView()
circleStoryView.viewConfiguration = config

// Apply the changes for CircleStorySwiftUIView instance
CircleStorySwiftUIView(viewConfiguration: config)

Configure video/feed complete actions for player deck components

var config = PlayerDeckContentConfiguration()

// Configure the video complete action: advanceToNext or loop
config.playerView.videoCompleteAction = .advanceToNext
// Configure the feed complete action: loop or dismiss
config.playerView.feedCompleteAction = .loop

// Apply the changes for PlayerDeckView instance
let playerDeckView = PlayerDeckView()
playerDeckView.viewConfiguration = config

// Apply the changes for PlayerDeckSwiftUIView instance
PlayerDeckSwiftUIView(viewConfiguration: config)

Configure video/feed complete actions for openVideoPlayer API

var config = VideoFeedContentConfiguration()

// Configure the video complete action: advanceToNext or loop
config.playerView.videoCompleteAction = .advanceToNext
// Configure the feed complete action: loop or dismiss
config.playerView.feedCompleteAction = .loop

VideoFeedViewController.openVideoPlayer(with: url, config, self, true) { result in
    print("Open VideoPlayer result \(result)")
}

Hide player UI elements

Hide player UI elements for video feed components

var config = VideoFeedContentConfiguration()

// Specifies if the share button should be hidden
config.playerView.shareButton.isHidden = false
// Specifies if the mute button should be hidden
config.playerView.muteButton.isHidden = false
// Specifies if the play/pause button should be hidden
config.playerView.playbackButton.isHidden = false
// Specifies if the player caption (title) should be hidden
config.playerView.playerCaption.isHidden = true
// Specifies if the video detail button should be hidden
config.playerView.videoDetailButton.isHidden = true
// Specifies if the video detail title should be hidden
config.playerView.videoDetail.titleConfiguration.isHidden = false

// Apply the changes for VideoFeedViewController instance
let feedVC = VideoFeedViewController()
feedVC.viewConfiguration = config

// Apply the changes for VideoFeedView instance
let videoFeedView = VideoFeedView()
videoFeedView.viewConfiguration = config

// Apply the changes for VideoFeedSwiftUIView instance
VideoFeedSwiftUIView(viewConfiguration: config)

Hide player UI elements for story block components

var config = StoryBlockConfiguration()

// === Embedded mode ===
// Specifies if the share button should be hidden for embedded mode
config.shareButton.isHidden = false
// Specifies if the mute button should be hidden for embedded mode
config.muteButton.isHidden = false
// Specifies if the play/pause button should be hidden for embedded mode
config.playbackButton.isHidden = false
// Specifies if the player caption (title) should be hidden for embedded mode
config.playerCaption.isHidden = true
// Specifies if the video detail button should be hidden for embedded mode
config.videoDetailButton.isHidden = true
// Specifies if the video detail title should be hidden for embedded mode
config.videoDetail.titleConfiguration.isHidden = false

// === Fullscreen mode ===
// Specifies if the share button should be hidden for fullscreen mode
config.fullScreenPlayerView.shareButton.isHidden = false
// Specifies if the mute button should be hidden for fullscreen mode
config.fullScreenPlayerView.muteButton.isHidden = false
// Specifies if the play/pause button should be hidden for fullscreen mode
config.fullScreenPlayerView.playbackButton.isHidden = false
// Specifies if the player caption (title) should be hidden for fullscreen mode
config.fullScreenPlayerView.playerCaption.isHidden = true
// Specifies if the video detail button should be hidden for fullscreen mode
config.fullScreenPlayerView.videoDetailButton.isHidden = true
// Specifies if the video detail title should be hidden for fullscreen mode
config.fullScreenPlayerView.videoDetail.titleConfiguration.isHidden = false

// Apply the changes for StoryBlockViewController instance
let storyBlockVC = StoryBlockViewController()
storyBlockVC.viewConfiguration = config

// Apply the changes for StoryBlockView instance
let storyBlockView = StoryBlockView()
storyBlockView.viewConfiguration = config

// Apply the changes for StoryBlockSwiftUIView instance
StoryBlockSwiftUIView(viewConfiguration: config)

Hide player UI elements for circle story components

var config = CircleStoryContentConfiguration()

// Specifies if the share button should be hidden
config.playerView.shareButton.isHidden = false
// Specifies if the mute button should be hidden
config.playerView.muteButton.isHidden = false
// Specifies if the play/pause button should be hidden
config.playerView.playbackButton.isHidden = false
// Specifies if the player caption (title) should be hidden
config.playerView.playerCaption.isHidden = true
// Specifies if the video detail button should be hidden
config.playerView.videoDetailButton.isHidden = true
// Specifies if the video detail title should be hidden
config.playerView.videoDetail.titleConfiguration.isHidden = false

// Apply the changes for CircleStoryViewController instance
let circleVC = CircleStoryViewController()
circleVC.viewConfiguration = config

// Apply the changes for CircleStoryView instance
let circleStoryView = CircleStoryView()
circleStoryView.viewConfiguration = config

// Apply the changes for CircleStorySwiftUIView instance
CircleStorySwiftUIView(viewConfiguration: config)

Hide player UI elements for player deck components

var config = PlayerDeckContentConfiguration()

// Specifies if the share button should be hidden
config.playerView.shareButton.isHidden = false
// Specifies if the mute button should be hidden
config.playerView.muteButton.isHidden = false
// Specifies if the play/pause button should be hidden
config.playerView.playbackButton.isHidden = false
// Specifies if the player caption (title) should be hidden
config.playerView.playerCaption.isHidden = true
// Specifies if the video detail button should be hidden
config.playerView.videoDetailButton.isHidden = true
// Specifies if the video detail title should be hidden
config.playerView.videoDetail.titleConfiguration.isHidden = false

// Apply the changes for PlayerDeckView instance
let playerDeckView = PlayerDeckView()
playerDeckView.viewConfiguration = config

// Apply the changes for PlayerDeckSwiftUIView instance
PlayerDeckSwiftUIView(viewConfiguration: config)

Hide player UI elements for openVideoPlayer API

var config = VideoFeedContentConfiguration()

// Specifies if the share button should be hidden
config.playerView.shareButton.isHidden = false
// Specifies if the mute button should be hidden
config.playerView.muteButton.isHidden = false
// Specifies if the play/pause button should be hidden
config.playerView.playbackButton.isHidden = false
// Specifies if the player caption (title) should be hidden
config.playerView.playerCaption.isHidden = true
// Specifies if the video detail button should be hidden
config.playerView.videoDetailButton.isHidden = true
// Specifies if the video detail title should be hidden
config.playerView.videoDetail.titleConfiguration.isHidden = false

VideoFeedViewController.openVideoPlayer(with: url, config, self, true) { result in
    print("Open VideoPlayer result \(result)")
}

Customize share button position

By default the share button is shown inside the more menu. You can move it to the player's top area using the snippets below.

Customize share button position for video feed components

var config = VideoFeedContentConfiguration()

// Show the share button in the player's top area instead of the more menu
config.playerView.shareButton.position = .playerTopArea

// Apply the changes for VideoFeedViewController instance
let feedVC = VideoFeedViewController()
feedVC.viewConfiguration = config

// Apply the changes for VideoFeedView instance
let videoFeedView = VideoFeedView()
videoFeedView.viewConfiguration = config

// Apply the changes for VideoFeedSwiftUIView instance
VideoFeedSwiftUIView(viewConfiguration: config)

Customize share button position for story block components

var config = StoryBlockConfiguration()

// Show the share button in the player's top area instead of the more menu for embedded mode
config.shareButton.position = .playerTopArea
// Show the share button in the player's top area instead of the more menu for fullscreen mode
config.fullScreenPlayerView.shareButton.position = .playerTopArea

// Apply the changes for StoryBlockViewController instance
let storyBlockVC = StoryBlockViewController()
storyBlockVC.viewConfiguration = config

// Apply the changes for StoryBlockView instance
let storyBlockView = StoryBlockView()
storyBlockView.viewConfiguration = config

// Apply the changes for StoryBlockSwiftUIView instance
StoryBlockSwiftUIView(viewConfiguration: config)

Customize share button position for circle story components

var config = CircleStoryContentConfiguration()

// Show the share button in the player's top area instead of the more menu
config.playerView.shareButton.position = .playerTopArea

// Apply the changes for CircleStoryViewController instance
let circleVC = CircleStoryViewController()
circleVC.viewConfiguration = config

// Apply the changes for CircleStoryView instance
let circleStoryView = CircleStoryView()
circleStoryView.viewConfiguration = config

// Apply the changes for CircleStorySwiftUIView instance
CircleStorySwiftUIView(viewConfiguration: config)

Customize share button position for openVideoPlayer API

var config = VideoFeedContentConfiguration()

// Show the share button in the player's top area instead of the more menu
config.playerView.shareButton.position = .playerTopArea

VideoFeedViewController.openVideoPlayer(with: url, config, self, true) { result in
    print("Open VideoPlayer result \(result)")
}

Configure scroll navigation arrow button

Configure scroll navigation arrow button for video feed components

var config = VideoFeedContentConfiguration()

// Specifies if the arrow button should be visible
config.playerView.scrollNavigation.isArrowButtonVisible = true

// Apply the changes for VideoFeedViewController instance
let feedVC = VideoFeedViewController()
feedVC.viewConfiguration = config

// Apply the changes for VideoFeedView instance
let videoFeedView = VideoFeedView()
videoFeedView.viewConfiguration = config

// Apply the changes for VideoFeedSwiftUIView instance
VideoFeedSwiftUIView(viewConfiguration: config)

Configure scroll navigation arrow button for story block components

var config = StoryBlockConfiguration()

// Specifies if the arrow button should be visible for embedded mode
config.scrollNavigation.isArrowButtonVisible = true
// Specifies if the arrow button should be visible for fullscreen mode
config.fullScreenPlayerView.scrollNavigation.isArrowButtonVisible = true

// Apply the changes for StoryBlockViewController instance
let storyBlockVC = StoryBlockViewController()
storyBlockVC.viewConfiguration = config

// Apply the changes for StoryBlockView instance
let storyBlockView = StoryBlockView()
storyBlockView.viewConfiguration = config

// Apply the changes for StoryBlockSwiftUIView instance
StoryBlockSwiftUIView(viewConfiguration: config)

Configure scroll navigation arrow button for circle story components

var config = CircleStoryContentConfiguration()

// Specifies if the arrow button should be visible
config.playerView.scrollNavigation.isArrowButtonVisible = true

// Apply the changes for CircleStoryViewController instance
let circleVC = CircleStoryViewController()
circleVC.viewConfiguration = config

// Apply the changes for CircleStoryView instance
let circleStoryView = CircleStoryView()
circleStoryView.viewConfiguration = config

// Apply the changes for CircleStorySwiftUIView instance
CircleStorySwiftUIView(viewConfiguration: config)

Configure scroll navigation arrow button for player deck components

var config = PlayerDeckContentConfiguration()

// Specifies if the arrow button should be visible
config.playerView.scrollNavigation.isArrowButtonVisible = true

// Apply the changes for PlayerDeckView instance
let playerDeckView = PlayerDeckView()
playerDeckView.viewConfiguration = config

// Apply the changes for PlayerDeckSwiftUIView instance
PlayerDeckSwiftUIView(viewConfiguration: config)

Configure scroll navigation arrow button for openVideoPlayer API

var config = VideoFeedContentConfiguration()

// Specifies if the arrow button should be visible
config.playerView.scrollNavigation.isArrowButtonVisible = true

VideoFeedViewController.openVideoPlayer(with: url, config, self, true) { result in
    print("Open VideoPlayer result \(result)")
}

Customize chat style

The chat style configuration lets you customize the appearance of chat messages shown during a livestream. You can configure the text color and an optional text shadow (color, opacity, radius, and offset).

Customize chat style for video feed components

var config = VideoFeedContentConfiguration()

// Configure the text color for chat messages
config.playerView.chatStyle.textColor = .white
// Configure the text shadow for chat messages
config.playerView.chatStyle.textShadow = TextShadowConfiguration(
    color: .black,
    opacity: 0.5,
    radius: 2,
    offset: CGSize(width: 0, height: 1)
)

// Apply the changes for VideoFeedViewController instance
let feedVC = VideoFeedViewController()
feedVC.viewConfiguration = config

// Apply the changes for VideoFeedView instance
let videoFeedView = VideoFeedView()
videoFeedView.viewConfiguration = config

// Apply the changes for VideoFeedSwiftUIView instance
VideoFeedSwiftUIView(viewConfiguration: config)

Customize chat style for story block components

var config = StoryBlockConfiguration()

// === Embedded mode ===
// Configure the text color for chat messages in embedded mode
config.chatStyle.textColor = .white
// Configure the text shadow for chat messages in embedded mode
config.chatStyle.textShadow = TextShadowConfiguration(
    color: .black,
    opacity: 0.5,
    radius: 2,
    offset: CGSize(width: 0, height: 1)
)

// === Fullscreen mode ===
// Configure the text color for chat messages in fullscreen mode
config.fullScreenPlayerView.chatStyle.textColor = .white
// Configure the text shadow for chat messages in fullscreen mode
config.fullScreenPlayerView.chatStyle.textShadow = TextShadowConfiguration(
    color: .black,
    opacity: 0.5,
    radius: 2,
    offset: CGSize(width: 0, height: 1)
)

// Apply the changes for StoryBlockViewController instance
let storyBlockVC = StoryBlockViewController()
storyBlockVC.viewConfiguration = config

// Apply the changes for StoryBlockView instance
let storyBlockView = StoryBlockView()
storyBlockView.viewConfiguration = config

// Apply the changes for StoryBlockSwiftUIView instance
StoryBlockSwiftUIView(viewConfiguration: config)

Customize chat style for circle story components

var config = CircleStoryContentConfiguration()

// Configure the text color for chat messages
config.playerView.chatStyle.textColor = .white
// Configure the text shadow for chat messages
config.playerView.chatStyle.textShadow = TextShadowConfiguration(
    color: .black,
    opacity: 0.5,
    radius: 2,
    offset: CGSize(width: 0, height: 1)
)

// Apply the changes for CircleStoryViewController instance
let circleVC = CircleStoryViewController()
circleVC.viewConfiguration = config

// Apply the changes for CircleStoryView instance
let circleStoryView = CircleStoryView()
circleStoryView.viewConfiguration = config

// Apply the changes for CircleStorySwiftUIView instance
CircleStorySwiftUIView(viewConfiguration: config)

Customize chat style for player deck components

var config = PlayerDeckContentConfiguration()

// Configure the text color for chat messages
config.playerView.chatStyle.textColor = .white
// Configure the text shadow for chat messages
config.playerView.chatStyle.textShadow = TextShadowConfiguration(
    color: .black,
    opacity: 0.5,
    radius: 2,
    offset: CGSize(width: 0, height: 1)
)

// Apply the changes for PlayerDeckView instance
let playerDeckView = PlayerDeckView()
playerDeckView.viewConfiguration = config

// Apply the changes for PlayerDeckSwiftUIView instance
PlayerDeckSwiftUIView(viewConfiguration: config)

Customize chat style for openVideoPlayer API

var config = VideoFeedContentConfiguration()

// Configure the text color for chat messages
config.playerView.chatStyle.textColor = .white
// Configure the text shadow for chat messages
config.playerView.chatStyle.textShadow = TextShadowConfiguration(
    color: .black,
    opacity: 0.5,
    radius: 2,
    offset: CGSize(width: 0, height: 1)
)

VideoFeedViewController.openVideoPlayer(with: url, config, self, true) { result in
    print("Open VideoPlayer result \(result)")
}

Hide "Tap to enter livestream"

Hide "Tap to enter livestream" for video feed components

var config = VideoFeedContentConfiguration()

// Specifies whether the "Tap to enter livestream" is hidden
config.playerView.tapToEnterLiveStreamHidden = false

// Apply the changes for VideoFeedViewController instance
let feedVC = VideoFeedViewController()
feedVC.viewConfiguration = config

// Apply the changes for VideoFeedView instance
let videoFeedView = VideoFeedView()
videoFeedView.viewConfiguration = config

// Apply the changes for VideoFeedSwiftUIView instance
VideoFeedSwiftUIView(viewConfiguration: config)

Hide "Tap to enter livestream" for story block components

var config = StoryBlockConfiguration()

// Specifies whether the "Tap to enter livestream" is hidden for embedded mode
config.tapToEnterLiveStreamHidden = false
// Specifies whether the "Tap to enter livestream" is hidden for fullscreen mode
config.fullScreenPlayerView.tapToEnterLiveStreamHidden = false

// Apply the changes for StoryBlockViewController instance
let storyBlockVC = StoryBlockViewController()
storyBlockVC.viewConfiguration = config

// Apply the changes for StoryBlockView instance
let storyBlockView = StoryBlockView()
storyBlockView.viewConfiguration = config

// Apply the changes for StoryBlockSwiftUIView instance
StoryBlockSwiftUIView(viewConfiguration: config)

Hide "Tap to enter livestream" for circle story components

var config = CircleStoryContentConfiguration()

// Specifies whether the "Tap to enter livestream" is hidden
config.playerView.tapToEnterLiveStreamHidden = false

// Apply the changes for CircleStoryViewController instance
let circleVC = CircleStoryViewController()
circleVC.viewConfiguration = config

// Apply the changes for CircleStoryView instance
let circleStoryView = CircleStoryView()
circleStoryView.viewConfiguration = config

// Apply the changes for CircleStorySwiftUIView instance
CircleStorySwiftUIView(viewConfiguration: config)

Hide "Tap to enter livestream" for player deck components

var config = PlayerDeckContentConfiguration()

// Specifies whether the "Tap to enter livestream" is hidden
config.playerView.tapToEnterLiveStreamHidden = false

// Apply the changes for PlayerDeckView instance
let playerDeckView = PlayerDeckView()
playerDeckView.viewConfiguration = config

// Apply the changes for PlayerDeckSwiftUIView instance
PlayerDeckSwiftUIView(viewConfiguration: config)

Hide "Tap to enter livestream" for openVideoPlayer API

var config = VideoFeedContentConfiguration()

// Specifies whether the "Tap to enter livestream" is hidden
config.playerView.tapToEnterLiveStreamHidden = false

VideoFeedViewController.openVideoPlayer(with: url, config, self, true) { result in
    print("Open VideoPlayer result \(result)")
}