CODEWITHSUNDEEP
iosiframeuiwebviewyoutube
Boaz
Boaz

Reputation: 5084

margin on youtube iframe in iOS

I'm having a UIWebView with the following code:
<iframe class="youtube-player" type="text/html" width="320" height="180" src="http://www.youtube.com/embed/OsSZ4u7Sz6s" frameborder="0"></iframe>

The thing is the the video preview is offest by a few pixels (see image)

I checked with recursiveDescription The UIWebView itself is in the right place (0,0,320,180)

How can I make it tight?
enter image description here

Edit:
Apparently it happens on Vimeo iframe as well -so the problem is not youtube specific but iframe specific

Upvotes: 4

Views: 1575

Answers (2)

Segev
Segev

Reputation: 19303

Margins and paddings needs to be reseted.

NSString *yourHtml = @"<html><head><title>.</title><style>body,html,iframe{margin:0;padding:0;}</style></head><body><iframe width=\"100%%\"  height=\"250\" src=\"http://www.youtube.com/embed/OsSZ4u7Sz6s\" frameborder=\"0\" allowfullscreen></iframe></body></html>";
[self.webView loadHTMLString:yourHtml baseURL:nil];

If you want more flexibility with your videos you can take a look at my answer here that uses a 3rd party class.

Upvotes: 4

Iree
Iree

Reputation: 358

Your webView is adding the margins because you have no body in your html. Just add a body with no margins:

<body style='margin:0px;'><iframe ...></iframe></body>

And that's it.

However, if you allow me to say it, it looks nice with a white margin :D you would just need to adjust the size of the iframe.

Hope it helps!

Upvotes: 0

Related Questions