ios – HStack Scroll View Squishes my AVPlayer Views and its overlay textual content


I’ve this horizontal scroll view in my app which performs three separate movies:

enter image description here

However as you may see, the textual content goes out of bounds. Even the width of every Card is not uniform. This wasn’t the case after I solely put considered one of these videoCards on the display. Why is that occuring and the way do I repair it?

My Scroll View for the video playing cards seems like this:

ScrollView(.horizontal, showsIndicators: false) {
                HStack(spacing: 40) {
                    ForEach(videoManager.movies) { video in
                        RecentCard(video: video)
                .onChange(of: videoManager.movies) { _ in
                    print("VM loaded Recents Movies")

and every VideoCard (I name them recentCards), seems like this:

struct RecentCard: View {
    @State personal var participant = AVPlayer()
    @State personal var playToggle: Bool = true
    @State var video: VideoModel
    var physique: some View {
        ZStack(alignment: .main) {
        .body(maxWidth: .infinity, maxHeight: 300, alignment: .main)
        .background(.thinMaterial, in: RoundedRectangle(cornerRadius: 20))
    var videoPlayer: some View {
        VideoPlayer(participant: participant)
            .onAppear {
                participant = AVPlayer(url: video.videoUrlPath!)
            .onTapGesture {
                if playToggle == false {
                    playToggle = true
                } else {
                    playToggle = false
                let impactHeavy = UIImpactFeedbackGenerator(model: .heavy)

    var textOverlay: some View {
        VStack(alignment: .main) {
            Textual content(video.title)
            VStack(alignment: .main) {
                Textual content(video.title2)
                Textual content("(video.viewCount) Views")
                    .body(maxWidth: .infinity, maxHeight: .infinity, alignment: .bottomTrailing)
                    .offset(x: 10)
                //Textual content( ?? "NIL")
        .body(maxWidth: .infinity, maxHeight: 200, alignment: .topLeading)
        .offset(y: 10)



Leave a Reply