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

【问题标题】：How to scale iframe video to smaller size to fit UIWebView frame in iOS?如何将 iframe 视频缩放到更小的尺寸以适应 iOS 中的 UIWebView 框架？
【发布时间】：2018-09-15 04:15:00
【问题描述】：

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

顶部的UIWebView 是videoWebView 使用loadHTMLString 方法显示来自Vimeo API 的视频。底部的UIWebView 是视频描述，也是一个HTML 字符串。

视频的iFrame 大小大于videoWebView 帧。如何缩放它以适合 videoWebView 框架？

目前是这样的：

视频的 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 和“Aspect Fit”。

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

【问题讨论】：

标签： html ios objective-c iframe uiwebview

【解决方案1】：

这是我必须做的（一点点 HTML 和 CSS 魔法）：

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

在您的 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 项目中 - 示例：

在ViewController 中加载HTML String 在UIWebView 中，添加一个属性：

@property (nonatomic, strong) NSString *videoEmbedHTML;

最后，将以下代码添加到view 中，您在UIWebView 中加载HTML String：

// 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];

这就是我的UIWebView 现在的样子：

【讨论】：

如果帖子明确要求投票，我倾向于不投票，但这看起来确实很好。不过，请在以后省略投票评论 - 我们更喜欢在这里有机地进行投票！谢谢。

【解决方案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 是通过反复试验获得的。我不知道是否有任何合乎逻辑的证据。

【讨论】：

太棒了！感谢分享！ ??

【解决方案3】：

请注意样式属性。

let toLoadInWebView = "<body style=\"margin:0px;padding:0px;overflow:hidden\">"
 + " <iframe  style=\"overflow: hidden; overflow-x: hidden; overflow-y: 
 hidden; height: 0;" + " max-height: 100%; max-width: 100%; min-height: 100%; 
 min-width: 100%; width: 0;    
 scrolling:no;position:absolute;top:0px;left:0px;right:0px;bottom:0px\" " + " 
 src=https://google.com\"></iframe>" + "</body>"

 webView.loadHTMLString(toLoadInWebView, baseURL: nil)

【讨论】：