> For the complete documentation index, see [llms.txt](https://docs.firework.com/firework-for-developers/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.firework.com/firework-for-developers/ios-sdk/integration-guide-for-ios-sdk/customization-ios/player-configurations-ios.md).
# 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
```swift
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
```swift
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
```swift
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
```swift
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
```swift
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](https://developer.apple.com/documentation/avfoundation/media_playback/configuring_the_audio_playback_of_ios_and_tvos_apps)
#### Enable PiP for video feed components
```swift
// 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
```swift
// 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
```swift
// 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
```swift
// Enable PiP for PlayerDeckView instance
let playerDeckView = PlayerDeckView()
playerDeckView.isPictureInPictureEnabled = true
// Enable PiP for PlayerDeckSwiftUIView instance
PlayerDeckSwiftUIView(isPictureInPictureEnabled: true)
```
#### Enable PiP for openVideoPlayer API
```swift
// 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
```swift
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
```swift
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
```swift
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
```swift
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
```swift
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
```swift
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
```swift
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
```swift
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
```swift
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
```swift
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
```swift
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
```swift
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
```swift
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
```swift
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
```swift
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
```swift
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.
```swift
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
```swift
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
```swift
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
```swift
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
```swift
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.
```swift
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
```swift
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
```swift
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
```swift
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
```swift
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
```swift
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
```swift
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
```swift
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
```swift
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
```swift
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
```swift
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
```swift
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
```swift
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
```swift
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
```swift
var config = VideoFeedContentConfiguration()
config.playerView.shareButton.behavior.baseURL = URL(string: "")
// 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
```swift
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: "")
// Specifies custom base URL for use in the sharing link for the video for embedded mode
config.fullScreenPlayerView.shareButton.behavior.baseURL = URL(string: "")
// 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
```swift
var config = CircleStoryContentConfiguration()
config.playerView.shareButton.behavior.baseURL = URL(string: "")
// 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
```swift
var config = PlayerDeckContentConfiguration()
config.playerView.shareButton.behavior.baseURL = URL(string: "")
// 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
```swift
var config = VideoFeedContentConfiguration()
// Specifies custom base URL for use in the sharing link for the video
config.playerView.shareButton.behavior.baseURL = URL(string: "")
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
```swift
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.
```swift
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
```swift
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
```swift
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
```swift
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
```swift
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
```swift
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
```swift
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
```swift
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
```swift
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
```swift
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
```swift
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
```swift
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
```swift
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
```swift
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
```swift
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
```swift
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
```swift
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
```swift
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
```swift
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
```swift
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
```swift
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
```swift
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
```swift
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
```swift
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
```swift
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
```swift
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
```swift
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
```swift
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)")
}
```