I'm building a website for a client who's majority of content is video. I'm using the HTML5 video element to display the content but have problems when it comes to Safari on iOS.
Safari on iOS does not download the video metadata until the user initiates the download, so the width and height properties of the video are set to a default size of 300 x 150 px - leaving a big area of black on either side of the video stretching the width of my containing element.
I'm trying to make the website as responsive as possible and so this default size does not work for me. Is there anyway to combat this so that Safari on iOS respects the video size?
I used the following CSS that worked for me. Tested on iPad mini with iOS 7.1
video {
min-height: 100%;
min-width: 100%;
height: auto !important;
width: auto !important;
}
The solution for iOS can be achieved with pure CSS. This works for <video> that occupies the width of the viewport, which is common in mobile.
Based on viewport units
1vw = 1% of viewport width
Get the width percentage computation based on aspect ratio
If your video is 16:9
9 divided by 16 = 0.5625 = 56.25% = 56.25vw
If your video is 4:3 and 21:9 that would be 0.75 and 0.4285 respectively.
Apply these CSS rules
video {
width: 100% !important;
height: 100% !important;
max-height: 56.25vw !important;
}
<video>
<source src="video.mp4" type="video/mp4">
</video>
The misbehaving iOS would be forced by the max-height to not grow taller than the ratio based on the width.
Via CSS, try giving it a width of 100% and a height of auto.
EDIT
In this case you need to use JavaScript to wait until the video has loaded the metadata and then read and set the width and height, for example:
var v = document.getElementById('myVideo');
v.addEventListener('loadedmetadata', function(e) {
this.width = this.videoWidth;
this.height = this.videoHeight;
}, false);
I haven't exactly tested this but it should lead you on the right track.
Try using width:100%, height:0, padding-bottom:56.25% (for 16:9 video) to set the size of the container element
Then get the container height/width to set the height/width of video element:
var the_case_study_video_wrapper = $('#tw-case-study-hero-video-wrapper'),
the_case_study_video = document.getElementById('tw-case-study-hero-video'),
the_height = $(the_case_study_video_wrapper).css('padding-bottom'),
the_width = $(the_case_study_video_wrapper).css('width');
$(the_case_study_video).css({
'height': the_height,
'width': the_width
});
And then maybe set the css again on orientation resize and/or browser resize...
I just set a fix width and height in css rule for video tag and safari displays the video properly.
Related
I'm working on a project where I have two images, one scrolling underneath the other. The top image ("glasses") has fixed positioning and z-index=1. The other image ("quote") is left as is and is underneath the first. When I viewed the website in portrait mode on my iPhone, the fixed glasses image gets cut off, while the quote image scales down and fits within the screen dimensions. It works fine on desktop and in landscape orientation. I've tried setting the width of the glasses image to 100% and using media queries to target the phone width, but I havent had much success. The glasses just get squeezed and lose their normal shape. I'd really appreciate any answers or suggestions.
Link to live project
the problem is in mobile/tablet views in general, not just iOS.
Remove min width and height from image and add
.quote,
.glasses {
width: 100%;
}
I have a site up, http://www.webdesignrepo.com, where I'm using vw and vh a lot.
The site works absolutely fine on Desktop and on Android browsers, but goes haywire in iOS on both the iphone and the ipad. The Desktop media query is mainly vw and vh. Once you get down to <768px wide I have swapped out some of the viewport units with px units.
I have a feeling it's something easy to fix, and I'm just not seeing something simple.
The only thing I can think of is its calculating the vw and vh units incorrectly, which is odd because caniuse.com says iOS safari 6.1 and above supports viewport units.
Anyone have any idea why this is happening?
(And yes, I see the irony of this whole situation)
Thanks in advance
iOS 6 and 7 seem to calculate viewport height correctly at first, but any call to vh after rendering the page recalculates the viewport height and adds it to the previous value, inconsistently resulting in an enormously tall page. Unfortunately, this is not consistent and currently there is no known workaround.
The caniuse.com viewport section's interactive mode links to a GitHub issue page explaining in more detail and Emil Björklund explains with some diagrams on his blog.
In iOS the vw or vh units render incorrectly when content inside an element changes.
This site http://mjau-mjau.com/blog/ios-vh-bug/ provides a useful workaround using Javascript, and iOS specific.
I however, did not want to use JS and decide to override the vw and vh font sizes with em for all mobile devices,
#media only screen and (max-device-width: 480px) {
.caption h1{
font-size: 6em;
}
.caption h2{
font-size: 4.3em;
}
.caption h1:first-letter {
font-size: 1.5em;
}
.caption p {
font-size: 1.2em;
}
}
I'm developing a site that will be visualized on iPad's Mobile Safari and standard PC's browsers.
To adapt my layout (especially a to the mobile browser, I'm using this CSS3 media query:
#media only screen and (max-width: 980px), only screen and (max-device-width: 1185px) {
#galleria {
margin-left:5%;
margin-top:15%;
}
}
#media only screen and (max-width: 1185px), only screen and (max-device-width: 980px) {
#galleria {
margin-left:16%;
margin-top:15%;
}
}
This method works, but when I rotate my device, the bugs comes out.
Basically in this page there's a called "logo" that represent an image, here's its CSS:
#logo {
position:absolute;
top:30px;
left:26%;
}
#logo img {
width:75%;
}
This image for each time that I rotate the device, becomes more smaller.
How can I avoid this bug?
Thanks for all the answers!
Since you are using a percent based width it's not becoming smaller, your screen is becoming bigger... it's ratio has not changed... that said, if you don't wish it to change size you can either not hard-code in a pixel size, instead of a percent size... or you can have javascript calculate the percent and convert it to a pixel size then load that in as the variable so once the screen is rotated it won't update to a new ("smaller illusion") size.
I have the following HTML structure
<body>
<div id="graphic">
<div id="wrap">
<svg width="8000px" height="32000px">
....
</svg>
</div>
</div>
And the following CSS applied to it:
#graphic {
width: 768px;
height: 1004px;
overflow: hidden;
}
#wrap {
width: 768px;
height: 1004px;
-webkit-transform: scale(1) translate3d(0, 0, 0);
}
Using CSS3 Animations I want to pan / zoom on a very large svg graphic. It is working...kind of. I discovered a problem on the iPad that when setting the y-value of translate3d to below ~ 16500px the graphic is not displayed anymore (In Safari or Chrome it works totally fine). I thought that there might be a limit to the height / width of rendering SVGs on mobile Safari, but removing the overflow:hidden from the #graphic container lets me scroll all the way down and everything it displayed correctly.
Has anyone heard of or experienced similar limitations / Is there some CSS value I have to set for this whole think to work? Any help is much appreciated.
Yes, you have hit a limit. Translate3D'd elements must fit into GPU texture memory, and when you "over or under translate" this can cause the whole texture to be dumped. See the Apple documentation on texture memory limitations.
I have a page with a lot of text and a couple pictures (like a news article) that I want to display in a way that looks good for both a tablet-sized device and a phone-sized device.
What I do right now is make Scale to Fit = YES and have my html have the meta tag
<meta name='viewport' content='initial-scale=1.0, maximum-scale=10.0'/>
but the font size is really too small on the iPad. I tried to resolve it by making initial-scale=2.0 but now it looks huge on the iPhone and even on the galaxy tablet.
How can I deal with varying device sizes and have the font size appear in a way that looks good all on devices?
Perhaps a better question is how can I make UIWebView wrap-text again after I zoom in?
I would keep the scale the same at 1.0, but increase the text size as soon as there is more space available on larger screens. You can achieve this using css media queries:
#media screen and (min-width : 768px) {
/* Styles, for example to increase font size */
body { font-size: 120%; }
}
This will increase the body font size to 120% when displayed on a device with a screen width > 768 (iPad portrait width). You can use multiple of these rules for different widths of course.
W3 has the official Media Queries specification.