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()

// 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()

// 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()

// 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()

// 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()

// 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 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 icons 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 other player configurations 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 player icons 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 other player configurations 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 other player configurations 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 other player configurations 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>")

// 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)URL

Customize other player configurations

Customize other player configurations for video feed components

var config = VideoFeedContentConfiguration()

// Configure player style: fullBleed or fit
config.playerView.playerStyle = .fullBleed
// Configure the video complete action: advanceToNext or loop
config.playerView.videoCompleteAction = .advanceToNext
// Specifies if the share button should be hidden
config.playerView.shareButton.isHidden = false
// Specifies custom base URL for use in the sharing link for the video
config.playerView.shareButton.behavior.baseURL = URL(string: "https://fw.tv")
// Specifies if the video detail title should be hidden or not
config.playerView.videoDetail.titleConfiguration.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 should be hidden
config.playerView.playerCaption.isHidden = true
// Specifies if the video detail button should be hidden
config.playerView.videoDetailButton.isHidden = true
// 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
// Currently, only short videos are adapted to the horizontal layout
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)

Customize player icons for story block components

var config = StoryBlockConfiguration()

// Configure player style: fullBleed or fit for embedded mode
config.playerStyle = .fullBleed
// Specifies if the share button should be hidden for embedded mode
config.shareButton.isHidden = false
// Specifies custom base URL for use in the sharing link for the video for embedded mode
config.shareButton.behavior.baseURL = URL(string: "https://fw.tv")
// Specifies if the video detail title should be hidden or not
config.videoDetail.titleConfiguration.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 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


// Configure player style: fullBleed or fit for embedded mode
config.fullScreenPlayerView.playerStyle = .fullBleed
// Configure the video complete action: advanceToNext or loop for embedded mode
config.fullScreenPlayerView.videoCompleteAction = .advanceToNext
// Specifies if the share button should be hidden for embedded mode
config.fullScreenPlayerView.shareButton.isHidden = false
// Specifies custom base URL for use in the sharing link for the video for embedded mode
config.fullScreenPlayerView.shareButton.behavior.baseURL = URL(string: "https://fw.tv")
// Specifies if the video detail title should be hidden or not for embedded mode
config.fullScreenPlayerView.videoDetail.titleConfiguration.isHidden = false
// Specifies if the mute button should be hidden for embedded mode
config.fullScreenPlayerView.muteButton.isHidden = false
// Specifies if the play/pause button should be hidden for embedded mode
config.fullScreenPlayerView.playbackButton.isHidden = false
// Specifies if the player caption should be hidden for embedded mode
config.fullScreenPlayerView.playerCaption.isHidden = true
// Specifies if the video detail button should be hidden for embedded mode
config.fullScreenPlayerView.videoDetailButton.isHidden = true
// 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
// Currently, only short videos are adapted to the horizontal layout
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)

Customize other player configurations for circle story components

var config = CircleStoryContentConfiguration()

// Configure player style: fullBleed or fit
config.playerView.playerStyle = .fullBleed
// Configure the video complete action: advanceToNext or loop
config.playerView.videoCompleteAction = .advanceToNext
// Specifies if the share button should be hidden
config.playerView.shareButton.isHidden = false
// Specifies custom base URL for use in the sharing link for the video
config.playerView.shareButton.behavior.baseURL = URL(string: "https://fw.tv")
// Specifies if the video detail title should be hidden or not
config.playerView.videoDetail.titleConfiguration.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 should be hidden
config.playerView.playerCaption.isHidden = true
// Specifies if the video detail button should be hidden
config.playerView.videoDetailButton.isHidden = true
// 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
// Currently, only short videos are adapted to the horizontal layout
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)

Customize other player configurations for player deck components

var config = PlayerDeckContentConfiguration()

// Configure player style: fullBleed or fit
config.playerView.playerStyle = .fullBleed
// Configure the video complete action: advanceToNext or loop
config.playerView.videoCompleteAction = .advanceToNext
// Specifies if the share button should be hidden
config.playerView.shareButton.isHidden = false
// Specifies custom base URL for use in the sharing link for the video
config.playerView.shareButton.behavior.baseURL = URL(string: "https://fw.tv")
// Specifies if the video detail title should be hidden or not
config.playerView.videoDetail.titleConfiguration.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 should be hidden
config.playerView.playerCaption.isHidden = true
// Specifies if the video detail button should be hidden
config.playerView.videoDetailButton.isHidden = true
// 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
// Currently, only short videos are adapted to the horizontal layout
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)

Customize other player configurations for openVideoPlayer API

var config = VideoFeedContentConfiguration()

// Configure player style: fullBleed or fit
config.playerView.playerStyle = .fullBleed
// Configure the video complete action: advanceToNext or loop
config.playerView.videoCompleteAction = .advanceToNext
// Specifies if the share button should be hidden
config.playerView.shareButton.isHidden = false
// Specifies custom base URL for use in the sharing link for the video
config.playerView.shareButton.behavior.baseURL = URL(string: "https://fw.tv")
// Specifies if the video detail title should be hidden or not
config.playerView.videoDetail.titleConfiguration.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 should be hidden
config.playerView.playerCaption.isHidden = true
// Specifies if the video detail button should be hidden
config.playerView.videoDetailButton.isHidden = true
// 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
// Currently, only short videos are adapted to the horizontal layout
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)