coiai Logo

This article is an English translation of the original Japanese post. Read the Japanese original →

[SwiftUI] Rounding the Corners of a Video

December 19, 2023

Categories: SwiftUI

Applying CornerRadius to a video loaded with AvKit makes the video itself spill outside the rounded corners. Like this.

VideoPlayer(player: player)
    .aspectRatio(4 / 3, contentMode: .fit)
    .overlay(
        RoundedRectangle(cornerRadius: 20)
            .stroke(Color.purple, lineWidth: 2)
    )

To fix this, just add .clipShape as shown below. Simpler than expected.

VideoPlayer(player: player)
    .aspectRatio(4 / 3, contentMode: .fit)
    .clipShape(RoundedRectangle(cornerRadius: 20))
    .overlay(
        RoundedRectangle(cornerRadius: 20)
            .stroke(Color.purple, lineWidth: 2)
    )