Video feed layouts (iOS)

Horizontal layout

By default, the video feed adopts a horizontal layout. You can use the following code to customize configurations, such as item ratio, for this layout.

let layout = VideoFeedHorizontalLayout()
// Configure itemWidth:itemHeight to 16:9
layout.itemWidthRatio = 16 / 9
// Configure spacing between items
layout.itemSpacing = 10
// Configure content insets
layout.contentInsets = UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)

let channelID = "<Encoded Channel ID>"
let playlistID = "<Encoded Playlist ID>"

// Create VideoFeedViewController instance
let feedVC = VideoFeedViewController(
    layout: layout,
    source: .channelPlaylist(
        channelID: channelID,
        playlistID: playlistID
    )
)

// Create VideoFeedView instance
let feedView = VideoFeedView(
    layout: layout,
    source: .channelPlaylist(
        channelID: channelID,
        playlistID: playlistID
    )
)

VideoFeedSwiftUIView(
    layout: layout,
    source: .channelPlaylist(
        channelID: channelID,
        playlistID: playlistID
    )
)

Grid layout

You can implement a grid layout using VideoFeedGridLayout. The following code allows you to customize configurations, such as the item ratio.

let layout = VideoFeedGridLayout()
// Configure itemWidth:itemHeight to 16:9
layout.itemWidthRatio = 16 / 9
// Configure number of columns
layout.numberOfColumns = 2
// Configure spacing between items
layout.itemSpacing = 10
// Configure content insets
layout.contentInsets = UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)

let channelID = "<Encoded Channel ID>"
let playlistID = "<Encoded Playlist ID>"

// Create VideoFeedViewController instance
let feedVC = VideoFeedViewController(
    layout: layout,
    source: .channelPlaylist(
        channelID: channelID,
        playlistID: playlistID
    )
)

// Create VideoFeedView instance
let feedView = VideoFeedView(
    layout: layout,
    source: .channelPlaylist(
        channelID: channelID,
        playlistID: playlistID
    )
)

VideoFeedSwiftUIView(
    layout: layout,
    source: .channelPlaylist(
        channelID: channelID,
        playlistID: playlistID
    )
)

Last updated