英文:
remove white background/border from swift video rendered using embedded HTML and WKWebView
问题
你好，我有一个YouTube结构，用于加载YouTube短视频，但视频周围有大白色背景或边框，我无法去掉它。我尝试了应用.tint、.foreground、.background等属性，但都没有效果。唯一改变白色边框大小的方法是修改嵌入的HTML中的宽度和高度。似乎视频没有填充整个框架，所以白色边框填充了其余部分。如果有人知道我如何修改这段代码来去掉白色边框，我将不胜感激。我还面临一个问题，YouTube的播放/暂停按钮以及时间条和所有其他视频选项都很小，不随视频大小增加而增加。
import SwiftUI
import WebKit
struct SwiftUIView: View {
@Environment(\.colorScheme) var colorScheme
var body: some View {
VStack{
YouTubeView(link: "-rHELEJuqkU")
}
}
}
struct SwiftUIView_Previews: PreviewProvider {
static var previews: some View {
SwiftUIView()
}
}
struct YouTubeView: UIViewRepresentable {
let link: String
func makeUIView(context: Context) -> WKWebView {
let webConfiguration = WKWebViewConfiguration()
webConfiguration.allowsInlineMediaPlayback = true
return WKWebView(frame: .zero, configuration: webConfiguration)
}
func updateUIView(_ uiView: WKWebView, context: Context) {
let embedHTML = """
<div style="display: flex; justify-content: center; align-items: center; height: 100vh;">
<iframe width="500" height="920" src="https://www.youtube.com/embed/\(link)" frameborder="0" allowfullscreen></iframe>
</div>
"""
uiView.scrollView.isScrollEnabled = false
uiView.loadHTMLString(embedHTML, baseURL: nil)
}
}
请注意，我已将代码中的"替换为正常的引号（"）。希望这可以解决你的问题。
英文:
Hello I have a YouTube struct that loads in YouTube shorts and the videos have a large white background or border around them and I can't get it to go away. I tried applying .tint, .foreground, .background and none work. The only way of changing the size of the white border is by changing the width and height inside the embedded HTML. It seems like the video doesn't fill the whole frame so a white border fills the rest. If anyone knows how I can modify this code to get ride of the white border Id appreciate it. I am also facing an issue where the YouTube play/pause button along with the time bar and all the other video options are very small and don't increase with the size of the video.
import SwiftUI
import WebKit
struct SwiftUIView: View {
@Environment(\.colorScheme) var colorScheme
var body: some View {
VStack{
YouTubeView(link: "-rHELEJuqkU")
}
}
}
struct SwiftUIView_Previews: PreviewProvider {
static var previews: some View {
SwiftUIView()
}
}
struct YouTubeView: UIViewRepresentable {
let link: String
func makeUIView(context: Context) -> WKWebView {
let webConfiguration = WKWebViewConfiguration()
webConfiguration.allowsInlineMediaPlayback = true
return WKWebView(frame: .zero, configuration: webConfiguration)
}
func updateUIView(_ uiView: WKWebView, context: Context) {
let embedHTML = """
<div style="display: flex; justify-content: center; align-items: center; height: 100vh;">
<iframe width="500" height="920" src="https://www.youtube.com/embed/\(link)" frameborder="0" allowfullscreen></iframe>
</div>
"""
uiView.scrollView.isScrollEnabled = false
uiView.loadHTMLString(embedHTML, baseURL: nil)
}
}
答案1
得分: 1
因为很难指定YouTube控件的大小，你可以像这样将整个视图放大：
YouTubeView(link: "-rHELEJuqkU")
.scaleEffect(3, anchor: .topLeading)
然后相应地调整你的HTML代码：
let embedHTML = """
<body style="background-color:black;">
<iframe
width="315"
height="560"
src="https://www.youtube.com/embed/\(link)" frameborder="0" allowfullscreen></iframe>
</body>
"""
它不是像素完美的，因为视频的大小和纵横比将不匹配iOS设备的大小和纵横比，但它非常接近。
英文:
since it's hard to specify the size of the youtube controls, you could scale the entire view up like this
YouTubeView(link: "-rHELEJuqkU")
.scaleEffect(3, anchor: .topLeading)
then adjust your html code accordingly
let embedHTML = """
<body style="background-color:black;">
<iframe
width="315"
height="560"
src="https://www.youtube.com/embed/\(link)" frameborder="0" allowfullscreen></iframe>
</body>
"""
it's not pixel perfect since the size and aspect ratio of the video will not match the size and aspect ratio of the iOS device.. but it's pretty close.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论