Question

我正在尝试将youtube视频iframe放在WebView组件中并且效果很好但是当我想设置WebView组件的大小以匹配iframe大小时，它总是在视频周围留下奇怪的边框。还有一点非常奇怪的是，将iframe宽度设置为屏幕宽度会在正确的网站上产生巨大的差距。我尝试了很多东西，例如在View标签中包装WebView并将此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没有改变任何东西我仍然可以看到整个视频。我尝试使用 automaticAdjustContentInsets = {false} 和 scalesPageToFit = {TRUE} 。我也尝试过：

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

在iframe内部没有结果。

我从有同样问题的人那里读了this帖子，但没有回答

这似乎很简单，但它阻止了我使用我的应用程序。林 100％确定有人已经在反应原生中使用0边框和边距嵌入iframe：P。如果你看到一些例子，请告诉我。

Answer 1

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

例如：

自：

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

要：

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

Answer 2

我的猜测是，不必要的差距来自包装iframe的body标记。您应该像在网上通常那样重置html和body标签上的边距和填充。仅供参考，您可以通过打开Safari并单击“开发” - ＆gt;来检查WebView的代码和样式。 iPhone模拟器 - ＆gt;您的WEBVIEW（它可能会显示为：空白）。然后，

WebView嵌入视频在视频周围始终有白色边框

2 个答案: