I am embedding youtube video inside a UIWebView. The Size of the UIWebView is 124x86. And the Code for the same is:
NSString* embedHTML =#"\
<html><head>\
<style type=\"text/css\">\
body {\
background-color: transparent;\
color: white;\
}\
</style>\
</head><body style=\"margin:0\">\
<embed id=\"yt\" src=\"%#\" type=\"application/x-shockwave-flash\" \
width=\"124\" height=\"86\"></embed>\
</body></html>";
When Loaded, the thumbnail doesn't show up properly. its size is way bigger than 124x86 and not fitting into UIWebView. (So now I can see only 1/4th portion of the thumbnail).
I want that thumbnail gets shrinks (or gets generated) to the size of 124x86 and fits into UIWebView.
Related
I have html text returned from the server and I am using a UITextView on the IOS client to render the text. I am first converting the html string to attributed string and then enumerating over the attributes and changing the font, foreground color of the text as needed. Finally I am setting the attributed text of UiTextView. However, when the html contains images and I see that they get cut off when rendered in UITextView.
Any pointers on how I could change the width and height of images contained in the html text in order to fit my phone screen width?
I use SwiftSoup to extract data from html or edit the HTML string. I also have found that when images are present it's easier to manage the layout and format inside a WKWebView.
This example also helps to add support for dark mode in your WKWebView.
var newsRssBody: String = ""
let css = "#media (prefers-color-scheme: dark) {body { background-color: rgb(38,38,41); color: white; } a:link { color: #0096e2; } a:visited { color: #9d57df; } }"
try doc.head()?.append("<style>\(css)</style>")
self.newsRssBody = "\(doc)"
The headerString line helps with content sizing based on the device.
let headerString = "<header><meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no'></header>"
self.webView.loadHTMLString(headerSting + self.newsRssBody, baseURL: nil)
I'm loading Youtube video inside UIWebView using following code.
let videoUrl = "https://www.youtube.com/embed/F9GujgK0y2M"
let embedHTML = "<iframe width=\(self.webView.frame.size.width)\" height=\(self.webView.frame.size.height)\" src=\(videoUrl)?&playsinline=1\" frameborder=\"0\" allowfullscreen></iframe>"
Starting thumbnail for video is very large. I need to fit it according to size of UIWebView. Please help me, How can I change it ?
maybe this code can help you:
let yourVideoID = "F9GujgK0y2M"
let css = ".video-container {position:relative;padding-bottom:56.25%;height:0;overflow:hidden;} .video-container iframe, .video-container object, .video-container embed { position:absolute; top:0; left:0; width:100%; height:100%; }"
let url = "https://www.youtube.com/embed/\(yourVideoID)?playsinline=1&modestbranding=1&showinfo=0&rel=0&showsearch=0&loop=1&iv_load_policy=3"
let htmlString = "<html><head><style type=\"text/css\">\(css)</style></head><body><div class=\"video-container\"><iframe src=\"\(url)\" frameborder=\"0\"></iframe></div></body></html>"
yourWebView.scalesPageToFit = false
yourWebView.allowsInlineMediaPlayback = true;
yourWebView.loadHTMLString(htmlString, baseURL: nil)
Try this:
webView.scalesPageToFit = true
From Apple Documentation, setting this to true scales the webpage to fit the screen.
For me, removing the height and width properties in the iframe HTML tag made the frame fit the page width altogether.
I am using a split view controller with a UIWebView in the details view. On the iPhone 6 Plus, in landscape orientation, when I dismiss the master view to expand the details view to fit the whole screen, the content of the UIWebView gets stretched rather than resized to take advantage of the additional real estate.
How can I get the UIWebView to adjust the width of the content rather than stretching/zooming it when the the popover is dismissed?
(I was originally using a UITextView in the details view and converting the HTML string to an NSAttributedString. I didn't have the stretching issue with that, but the scrolling was choppy, etc., with large amounts of text. The UITextView works much better in this regard, with the stretching being the only issue.)
Prior to dismissing popover:
After dismissing popover:
EDIT: Here the string format I am using for the content displayed in the UIWebVIew:
private static let formatStringForUIWebView: NSString =
"<html>" +
"<head>" +
" <title></title>" +
" <meta name=\"viewport\" content=\"width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0\" />" +
" <style type=\"text/css\">" +
" pre { width: auto; white-space: pre-wrap; }" +
" </style>" +
"</head>" +
"<body>" +
" <div style='color: #555555; font-size: 12px; font-family: Helvetica;'>%#</div>" +
"</body>" +
"</html>";
This might be what you're looking for. It prevents font scaling.
-webkit-text-size-adjust: none;
Here is a reference link to this css property.
https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust
In your HTML content, define a meta tag that will instruct it to have a view port with the width of the device width:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
i was using uiwebview to play embded youtube video but today as sudden it stopped working any one knows work around?
NSString* videoHTML = [NSString stringWithFormat:#"\
<html>\
<head>\
<style type=\"text/css\">\
iframe {position:absolute; top:50%%; margin-top:-130px;}\
body {background-color:#000; margin:0;}\
</style>\
<script type=\"text/javascript\" src=\"https://www.youtube.com/player_api\"></script>\
<script>\
var player;\
function onYouTubeIframeAPIReady() {\
player = new YT.Player('player',{ events: {\
'onReady': onPlayerReady}\
});}\
function onPlayerReady(event) {\
setTimeout(function() {\
event.target.playVideo();\
}, 1000);\
}\
</script>\
</head>\
<body>\
<iframe class=\"youtube-player\" background-color:#000000 allowtransparency= \"true\" type=\"text/html\" width=100%% height=240px src=\"http://www.youtube.com/embed/%#?fs=1&autoplay=1&rel=0&version=3&enablejsapi=1&showinfo=0\" frameborder=\"0\" allowfullscreen/>\
</body>\
</html>",self.videoID];
[self.webView loadHTMLString:videoHTML baseURL:nil];
[webView setAllowsInlineMediaPlayback:YES];
Change /embed/... to /v/... and it'll work fine.
i changed the whole html to only reffere to mobile version of youtube site
I have a web view that doesn't take up the full screen. I set it's url to a youtube video to play the video in the web view area. When I change orientation of the device the view resizes but the content doesn't. If I set the scales page to fit flag on the web view it changes orientation properly but there's always white space around the video on the right and bottom regardless of orientation.
How can I get the video to fill the web view, and resize with orientation change without the wasted padding. Alternatively how can I make the video play full screen like it does on iPhone (which would be a viable alternative for me, skipping over the layout issue)
I read this tutorial and was able to solve the problem.
http://webdesignerwall.com/tutorials/css-elastic-videos
basically you can set the size of the containing item to one thing for portrait and another for landscape.
Also set your object embed code to have a height width of 100% instead of a fixed width.
This is my html:
<span class="youtube">
<object type="application/x-shockwave-flash" id="ytPlayer" style="visibility: visible;" allowscriptaccess="always">
</object>
</span>
This is my javascript:
var ytswf = document.getElementById('ytPlayer');
var videoID = 'Nky9omXFZD4';
ytswf.outerHTML = "<object height=\"100%\" width=\"100%\" type=\"application/x-shockwave-flash\" data=\"http://www.youtube.com/v/" + videoID + "&enablejsapi=1&playerapiid=ytplayerObj&rel=0&fs=1&autoplay=0&egm=0\" id=\"ytPlayer\" style=\"visibility: visible;\" ><param name=\"allowFullScreen\" value=\"True\" /><param name=\"allowScriptAccess\" value=\"always\" /></object>";
This is my css:
.youtube{width:432px; height:245px;}
#media only screen and (orientation:portrait)
{
.youtube{width:702px; height:398px;}
}
I use the following code and it works for me
// css
// You can add your own width and height values or insert this values using stringWithFormat
NSString *css = #"<style type=\"text/css\">\
.youtube{width:320px; height:363px;}\
#media only screen and (orientation:portrait) { \
.youtube{width:320px; height:363px;}\
}\
\
#media only screen and (orientation:landscape) {\
.youtube{width:480px; height:203px;}\
}\
</style>\
";
// different format of urls for iOS 5 and iOS 6
NSString *src = ([[[UIDevice currentDevice] systemVersion] compare:#"6" options:NSNumericSearch] == NSOrderedAscending)
? #"http://www.youtube.com/watch?v=%#?autoplay=1" // iOS 5
: #"http://www.youtube.com/v/%#?autoplay=1"; // iOS 6
// inserting css in <head> and inserting src
NSString *youTubeVideoHTML = [NSString stringWithFormat:
(#"<html><head>%#</head>\
<body style=\"margin:0\">\
<embed class=\"youtube\" id=\"yt\" src=\"%#\" type=\"application/x-shockwave-flash\" \
></embed>\
</body></html>") , css , src ];
// setting YouTube video ID
finalHtml = [NSString stringWithFormat: youTubeVideoHTML , videoID ];
[self.webView loadHTMLString:finalHtml baseURL:nil];