I have an embedded youtube video on a web page. On the desktop it works fine. However, on an ipad (running iOS7) the video quality is rather poor, probably 480p. Inside the iframe it looks fine, but when you make the video full screen it is very noticeable. I have tried using hd=1&vq=hd720 in the querystring and using cueVideoById with a suggested quality of 'hd720' but neither worked. Are there any work arounds either to get higher resolution on the ipad when embedded youtube videos are made fullscreen, or to force higher resolution for embedded youtube videos on the ipad?
I found a workaround that works, although it is hardly elegant.
Basically, I create the iframe with a dimensions large enough to get 720p quality. (Such as making the iframe 720x440 pixels.) And then, I use CSS transforms to scale the iframe back down to the size I want. The CSS looks something like:
-webkit-transform-origin: left top;
-webkit-transform: scale(0.5);
Where 0.5 could be replaced with whatever scale you had to increase the size of the iframe by.
The main downside to this from the user's perspective is that the video controls are scaled down. However, in full screen mode the controls are the normal size, and the user can pinch out to full screen, so for my team at least the trade-off in increased video quality was worth it.
Related
I have come across an unusual problem related to animated gifs on both the ipad and iphone on both safari and chrome and have been unable to find any posts with a similar problem.
Through a series of tests I have found that if the animated gif is over 480 pixels wide it will not play but stay on the first frame. You can view a test page here: http://www.echo3.com.au/test/animation/. They all play fine on desktop computer in all browsers.
Has anyone else had this problem as I am baffled by it?
I have created an introduction video for my application to youtube and I can't embed it in my application home page (try to play the video without changing quality settings) in high quality by default. Video is useless in lower than 720p since it displays navigation through my app.
Any ideas?
To get 720p (if available), add &vq=hd720 to the end of your video url.
www.youtube.com/embed/<VIDEO_CODE>/?vq=hd720
Similarly, &vq=hd1080 will force 1080p (if available).
I'm looking to embed some youtube videos in my web page and from looking at the videos on youtube they all seem to be displayed with an aspect ration of 16:9 or 640px:340px.
Trouble is I only have 600px max space to put them in, would I just work out the appropriate height i.e. 640/16*9 = 333px and display them in that and would that take care of everything ,or is there any other size allocated for the progress bar at bottom.
E.g. if you look at this video you can see the progress bar throughout.
http://www.youtube.com/user/southerncomfort?v=ygeWsoYYMuQ
Thanks,
You can use any youtube embed code generator to achieve your goal with ease.
Go to Advanced Youtube Embed Code Generator.
Enter the video ID and input either height or width in the
respective column and hit generate button(the empty field will be
automatically calculated with 16:9 ratio)
Copy the code and use it.
You can choose either 16:9 or 4:3, the later being 480px X 385px (+25px to height for controls).
OR, if you want 16:9, you can choose the size to be 560x315.
Check out the style guide: https://web.archive.org/web/20130415231312/http://support.google.com/youtube/bin/answer.py?hl=en&answer=178264
For anyone still on this,
https://www.w3schools.com/howto/howto_css_aspect_ratio.asp.
Ensure to use ALL CSS PROPERTIES AND STYLING enlisted else it won't render correctly on responsive sites and apps.
I'm using a full screen UIWebView to house/render an HTML5 application under iOS. Very much like Cordova/phonegap although I'm not using those. I try to make my webview size match the underlying display. Unfortunately, on retina displays, the value returned by self.view.bounds relies on the UIScreen scaling factor. So I get 1024x768 instead of 2048x1536. Not a huge problem except I then instantiate the UIWebView using the smaller bounds (after adjusting for the status bar) and some things get a bit jaggy. In particular, I use canvas at a couple of points and also rounded borders appear thick. To be clear, this isn't a case of scaled raster resources.
I'm not getting the full resolution of the screen using that UIWebView. Ideally, I'd like to set the screen scale to 1.0 but that doesn't appear to be supported. Any suggestions on how best to get full advantage of the screen?
The problem is most noticeable on the iPhone 5 simulator. I don't have that hardware to test on. iPad/new iPad I think has the problem but the jaggies aren't as noticeable.
Update: The more I look at this, the more I think it may be restricted to canvas.
Solution: In case anyone else gets here. Based on the answer below, I created all of my canvas elements with width and height multiplied by window.devicePixelRatio and then set their style attribute to have the original (device independent) size.
See https://stackoverflow.com/a/7736803/341994. Basically you need to detect that you've got double resolution and effectively double the resolution of the canvas.
An application I'm working on needs to get HQ YouTube thumbnails given a URL. Using this answer, I tried using the maxresdefault.jpg to get the maximum resolution of the thumbnail but on some videos (seemingly random), the request 404's.
Here are some examples:
http://img.youtube.com/vi/zIez5QVE3NI/maxresdefault.jpg works
http://img.youtube.com/vi/DaAfe5xTm8w/maxresdefault.jpg doesn't work
Using the same URL's, other requests using the same video keys do work:
http://img.youtube.com/vi/zIez5QVE3NI/default.jpg works
http://img.youtube.com/vi/DaAfe5xTm8w/default.jpg works
Why doesn't maxresdefault.jpg reliably return the image? Both of those videos are public and can be embedded.
I'd use 0.jpg but it has black bars on the top and bottom of the image.
As I understand it, YouTube only generates high-res stills for high-res videos. The first one you link was uploaded at a resolution of at least 1080p, while the second was less than 720p.
Looks like the only thing you can do is pull the video feed, check that to see if a high-res still has been generated and up-scale the smaller one yourself if not.
All¹ YouTube stills are presented in the 4:3 aspect ratio, so will always have black bars at the top and bottom if the video is 16:9. In HTML/CSS, this is easily combated by setting the image as the background of a div and sizing the div to the correct aspect.
¹ Except the mqdefault.jpg stills, which are all in 16:9 aspect (320x180)
Update 2015 :
None of your 'maxresdefault' link seems to be working
Try these:
http://img.youtube.com/vi/<insert-youtube-video-id-here>/0.jpg
http://img.youtube.com/vi/<insert-youtube-video-id-here>/1.jpg
http://img.youtube.com/vi/<insert-youtube-video-id-here>/2.jpg
http://img.youtube.com/vi/<insert-youtube-video-id-here>/3.jpg
Update 2019 ::
https://i.ytimg.com/vi/<insert-youtube-video-id-here>/hqdefault.jpg
Seems to return highest possible image....
1.jpg, 2.jpg, 3.jpg return previews through the length of the clip which are handy also ;)