WebView 嵌入视频总是在视频周围有白色边框答案

【问题标题】：WebView embed video always have white borders around the videoWebView 嵌入视频总是在视频周围有白色边框
【发布时间】：2017-11-16 10:10:17
【问题描述】：

我正在尝试将 youtube 视频 iframe 放入 WebView 组件中，效果很好，但是当我想设置 WebView 组件的大小以匹配 iframe 大小时，它总是在视频周围留下奇怪的边框。真正奇怪的是，将 iframe 宽度设置为屏幕宽度会在正确的站点上产生巨大的差距。我尝试了很多东西，比如将 WebView 包装在 View 标记中并将这个 View 组件高度设置为 iframe 高度，但它总是在顶部和底部留下边框，这导致 WebView 在网站上有一个滚动条。

图片如下： link

这是我的代码

render() {
    return(
            <WebView
            source={{html: `<html><body><iframe width="${this.SCREEN_WIDTH}" height="315" src="https://www.youtube.com/embed/ojmk5tSj0sE" frameborder="0" allowfullscreen></iframe></html></body>` }}
            style={{height: 20}}
            >
            </WebView>          
    )
}

如您所见，我在这里尝试设置 height = 20 但 id 没有改变任何内容，我仍然可以看到整个视频。我尝试与 automaticallyAdjustContentInsets={false} 和 scalesPageToFit={true}。我也试过了：

 marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="no"

在 iframe 内没有结果。

我读了 this 发来的有同样问题的人的帖子，但没有得到答复

这似乎很容易，但它阻止了我的应用程序的进展。我是 100% 确定有人已经在 react-native :P 中嵌入了 0 边框和边距的 iframe。如果您看到了一些示例，请告诉我。

【问题讨论】：

标签： android iframe webview react-native react-native-android

【解决方案1】：

body 有默认的 margin 和 padding 值。对于不需要任何边框的情况。只需将边距和填充设置为零。

例如：

发件人：

<html><body>....</body></html>

收件人：

<html><body style="padding: 0; margin: 0;">...</body></html>

【讨论】：

感谢这对我的一些嵌入内容有用:)

【解决方案2】：

我的猜测是不必要的间隙来自包装 iframe 的 body 标签。您应该像在 Web 上通常那样重置 html 和 body 标签上的边距和填充。仅供参考，您只需打开 Safari 并单击“开发”->“iPhone 模拟器”->“您的 WEBVIEW”（它可能会显示为 about:blank），即可检查 WebView 的代码和样式。那么，

【讨论】：