I am using the below code and it seems to show a black screen in middle, how can i make this work, thanks

struct CollectionView: View {
    @State var player = AVPlayer(url: URL(string: "https://www.youtube.com/watch?v=")!)

var body: some View {
    ZStack {
        Image("cover")
            .resizable().opacity(0.2)
        VStack {
            Text("Demo Song")
                .font(.title)
        VideoPlayer(player: player)
                           .frame(width: 400,
                                  height: 300,
                                  alignment: .center)

        }
    }
}

}

import SwiftUI
import WebKit

struct YouTubeView: UIViewRepresentable {
    let videoId: String
    func makeUIView(context: Context) ->  WKWebView {
        return WKWebView()
    }
    func updateUIView(_ uiView: WKWebView, context: Context) {
        guard let demoURL = URL(string: "https://www.youtube.com/embed/\(videoId)") else { return }
        uiView.scrollView.isScrollEnabled = false
        uiView.load(URLRequest(url: demoURL))
    }
}

struct CollectionView: View {
    var ids = ["xxxxxxxxx", "xxxxxxxxxx", "xxxxxxxxx"]
    var body: some View {
        ZStack {
            Image("cover")
                .resizable().opacity(0.2)
            ScrollView(showsIndicators: false) {
                VStack {
                    Text("Demo")
                        .font(.title)

                    ForEach(ids, id:\.self) {idData in
                        YouTubeView(videoId: idData)
                            .frame(width: 300, height: 300)
                            .padding()
                    }

                }
            }

        }
    }
}

Guys there is much easier way to embed a video from YouTube

https://github.com/SvenTiigi/YouTubePlayerKit use this