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

我的屏幕有两个设置为相同高度的 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 在 Storyboard中设置为 scalesPageToFit 和“Aspect Fit”。

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

最佳答案

这是我必须做的才能让它工作(一点 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 项目中 - 示例:

add videoEmbed.html file into your Xcode project - example

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

@property (nonatomic, strong) NSString *videoEmbedHTML;

最后，在 UIWebView 中加载 HTML String 的 view 中添加以下代码:

// 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 现在的样子:

new screenshot

关于html - 如何将 iframe 视频缩放到更小的尺寸以适应 iOS 中的 UIWebView 框架？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37598190/

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

上一篇：ios - 刷新 Fitbit 的访问 token

下一篇：ios - NSTimer Press "Start"Again then Cannot "Stop"