I have added a poster image to a video, which is exactly the same dimensions as the video container itself:
My HTML looks like this (deliberately no width and height specified as I want the video to resize with the browser rather than remain fixed):
<video controls
src="mov/MVI_1880.mp4"
poster="mov/MVI_1880_poster.JPG">
</video>
My CSS looks like this (width set to 100% to ensure the video uses the full width of the viewport, and resizes automatically when the browser is resized):
img, video{
width: 100%;
}
However, when viewing this in either Chrome or Safari in iOS7 (iPhone 5S and iPad Mini), the poster image has black bars to the left and right:
Tried to post a link to an image here but it says I need a reputation of at least 10, to post more than 2 links - you'll just have to find the image on my Flickr site (see first two hyperlinks)
If I specifically set a width and height for the video element, then this problem goes away:
<video controls width="320" height="180"
src="mov/MVI_1880.mp4"
poster="mov/MVI_1880_poster.JPG">
</video>
Tried to post a link to an image here but it says I need a reputation of at least 10, to post more than 2 links - you'll just have to find the image on my Flickr site (see first two hyperlinks)
but I want to avoid this, as the video then remains at a fixed size when resizing the viewport.
I have tried setting a height of auto in the css, but this made no change.
Also worth noting, that this works fine in Chrome on my desktop(i.e. I have no width or height specified in the HTML, and a width of 100% in the CSS), and the poster image correctly sizes to the full width of the viewport:
Tried to post a link to an image here but it says I need a reputation of at least 10, to post more than 2 links - you'll just have to find the image on my Flickr site (see first two hyperlinks)
Any help much appreciated.
