> 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/video-feed-layouts-ios.md).

# 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. As demonstrated in the code below, you set the `itemWidthRatio` to 16:9 to render the video item in a horizontal layout.

```swift
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
    )
)
```

<div align="center" data-full-width="false"><figure><img src="/files/U7DQlQVEyjJ2pzC8UJ8Z" alt="" width="375"><figcaption><p>Vertical item width ratio (such as 4 / 6)</p></figcaption></figure></div>

<div align="center"><figure><img src="/files/W4ZZMNMwDn6a2d5gxTOh" alt="" width="375"><figcaption><p>Horizontal item width ratio (such as 16 / 9)</p></figcaption></figure></div>

### Grid layout

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

```swift
let layout = VideoFeedGridLayout()
// Configure itemWidth:itemHeight to 4:6
layout.itemWidthRatio = 4 / 6
// 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
    )
)
```

<figure><img src="/files/dvsNsgdBGpCTpUEzjnRo" alt="" width="375"><figcaption></figcaption></figure>