CODEWITHSUNDEEP
htmliosobjective-ciframeuiwebview
AVog
AVog

Reputation: 321

How to scale iframe video to smaller size to fit UIWebView frame in iOS?

My screen has two UIWebViews which are set to equal heights.

The top UIWebView is videoWebView to show a video from Vimeo API using loadHTMLString method. The bottom UIWebView is the video description which is also an HTML String.

The video's iFrame size is larger than the videoWebView frame. How do I scale it to fit the videoWebView frame?

Currently, it looks like this:

screenshot

The HTML String for the video is: 

<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>

The webView is set to scalesPageToFit and 'Aspect Fit' in the storyboard.

Any ideas? I spent quite some time googling but couldn't find an answer.

Upvotes: 3

Views: 4426

Answers (3)

minhazur
minhazur

Reputation: 4988

Please, note style attribute.

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)

Upvotes: 1

Dishant Kapadiya
Dishant Kapadiya

Reputation: 553

I faced the same issue while I was trying to load YouTube videos. The trick is to manipulate the URL itself. Generally the URL you would get looks something like this, <iframe width="854" height="480" src="https://www.youtube.com/embed/neV3EPgvZ3g" frameborder="0" allowfullscreen></iframe>.

If you manipulate the width and height it would change the size of iframe in your webView.

In Objective 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];

In 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)

NOTE: The factor of 2.6 is achieved by trial and error. I don't know if there is any logical proof for it.

Upvotes: 2

AVog
AVog

Reputation: 321

This is what I had to do to make it work (a little bit of HTML & CSS magic):

  1. create a videoEmbed.html file in a text editor (Sublime, for example)

  2. add the following formatter code in your videoEmbed.html file

    <!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>

  3. drag and drop your videoEmbed.html file into your Xcode project

Add videoEmbed.html file into your Xcode project - example:

add videoEmbed.html file into your Xcode project - example

  1. In the ViewController where you are loading the HTML String in the UIWebView, add a property:

@property (nonatomic, strong) NSString *videoEmbedHTML;

  1. Finally, add the following code to the view where you load the HTML String in the 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];

This is how my UIWebView looks now:

new screenshot

Upvotes: 5

Related Questions