Question

我的屏幕有两个UIWebViews，它们设置为相等的高度。

热门UIWebView为videoWebView，可使用loadHTMLString方法显示来自Vimeo API的视频。底部UIWebView是视频说明，也是HTML字符串。

视频的iFrame尺寸大于videoWebView框架。如何缩放它以适应videoWebView框架？

目前，它看起来像这样：

screenshot

视频的HTML字符串是：

<iframe src="https://player.vimeo.com/video/168639256?title=0&byline=0&portrait=0&badge=0&autopause=0&player_id=0" width="1920" height="1080" frameborder="0" title="Sleepy Steve" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

webView设置为scalesPageToFit和＆＃39; Aspect Fit＆＃39;在故事板中。

有什么想法吗？我花了很长时间在谷歌搜索，但无法找到答案。

Answer 1

这是我必须做的才能使它工作（一点点HTML和CSS魔术）：

在文本编辑器中创建videoEmbed.html文件（例如，Sublime）

在videoEmbed.html文件

中添加以下格式化程序代码

<!DOCTYPE html>
  <html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>embedded video</title>
<style>
    .video-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
    }
    .video-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
    }
</style>

将videoEmbed.html文件拖放到Xcode项目中

将videoEmbed.html文件添加到Xcode项目中 - 例如：

add videoEmbed.html file into your Xcode project - example

在ViewController中HTML String加载UIWebView的{{1}}，添加属性：

@property (nonatomic, strong) NSString *videoEmbedHTML;

最后，将以下代码添加到view中加载HTML String的{{1}}：
```
UIWebView
```

这就是我的// create a filePath for the videoEmbed.html file that you added to your Xcode project NSString *videoEmbedFilePath = [[NSBundle mainBundle] pathForResource:@"videoEmbed" ofType:@"html"]; NSError *err; self.videoEmbedHTML = [NSString stringWithContentsOfFile:videoEmbedFilePath encoding:NSUTF8StringEncoding error:&err]; NSString *html = [self.videoEmbedHTML stringByReplacingOccurrencesOfString:@"<embeddedVideo>" withString:self.video.videoLink]; // videoLink is the iframe src html link to load the video from an API endpoint [self.videoWebView loadHTMLString:html baseURL:nil];现在的样子：

new screenshot

Answer 2

我在尝试加载YouTube视频时遇到了同样的问题。诀窍是操纵URL本身。通常你会得到的URL看起来像这样， <iframe width="854" height="480" src="https://www.youtube.com/embed/neV3EPgvZ3g" frameborder="0" allowfullscreen></iframe>。

如果你操纵宽度和高度，它会改变webView中iframe的大小。

在目标C中：

CGFloat width = self.webView.frame.size.width;
CGFloat height = self.webView.frame.size.height;
NSString *URL = [NSString stringWithFormat:@"<iframe width=\"%f\" height=\"%f\" src=\"https://www.youtube.com/embed/7ksb_64XWPA\" frameborder=\"0\" allowfullscreen></iframe>", width * 2.6, height * 2.6];
[self.webView loadHTMLString:URL baseURL:nil];

在Swift中：

var width: CGFloat = webView.frame.size.width;
var height: CGFloat = webView.frame.size.height;
var URL = String(format: "<iframe width=\"%f\" height=\"%f\" src=\"https://www.youtube.com/embed/7ksb_64XWPA\" frameborder=\"0\" allowfullscreen></iframe>", width * 2.6, height * 2.6)
webView.loadHTMLString(URL, baseURL: nil)

注意：2.6的因子是通过反复试验来实现的。我不知道是否有任何合理的证据。

如何将iframe视频缩放到更小的尺寸以适应iOS中的UIWebView框架？

2 个答案:

在目标C中：

在Swift中：