Menu
I'm trying to make a fullscreen HTML background, which is easy enough. But because HTML5 video get's resized to fit the container while maintaining aspect ratio, I can't gett he desired effect.
Are there different scale modes for HTML5 video? I'd like to scale to fill-and-crop.
This is the desired effect done in Flash: http://www.caviarcontent.com/
If you resize the window you'll see it scale and crop. You will never get black bars.
Thanks for the help!
892
HTML5 Video Format for Desktop and Mobile StreamingThe HTML5 video format capabilities include three options to play: MP4, WebM, and Ogg. You should note that the Safari browser does not support Ogg, WebM is supported by only 58% of browsers, and MP4 is disabled by default in Firefox 24.
HTML Video Tags All you need to do is set the width to 100% and the height to auto. This will create a video that fills the entire parent and its height will be calculated automatically based on the width so that it maintains its current aspect ratio no matter the screen size.
With the introduction of HTML5, you can now place videos directly into the page itself. This makes it possible to have videos play on pages that are designed for mobile devices, as plugins like Adobe Flash Player don't work on Android or iOS.
Another way to do this with CSS is to use the object-fit property. This works on video or img elements
video {
object-fit: cover;
}
http://caniuse.com/object-fit
http://dev.opera.com/articles/css3-object-fit-object-position/
This is only compatible in Chrome 31+ but is the simplest CSS solution and is a Candidate Recommendation.
56
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
