# 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.

```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="https://3714303959-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fi7WZlclALJmj3AK87gZk%2Fuploads%2Fgit-blob-0058122da66462d4894ee2ef31499c1becd75861%2Fimage.png?alt=media" alt="" width="375"><figcaption></figcaption></figure></div>

<div align="center"><figure><img src="https://3714303959-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fi7WZlclALJmj3AK87gZk%2Fuploads%2Fgit-blob-c03b2c31b60a6d8a77e64fec52f9868b51f6bc49%2Fimage%20(1).png?alt=media" alt="" width="375"><figcaption></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 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
    )
)
```

<figure><img src="https://3714303959-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fi7WZlclALJmj3AK87gZk%2Fuploads%2Fgit-blob-26190d7acd0e65586d955a69276201c1081939b7%2Fimage%20(2).png?alt=media" alt="" width="375"><figcaption></figcaption></figure>
