HTML5 video fit width OR height
Solved it myself with a javascript function:
window.addEventListener('resize', resize, false);
video.height = 100; /* to get an initial width to work with*/
resize();
function resize() {
videoRatio = video.height / video.width;
windowRatio = window.innerHeight / window.innerWidth; /* browser size */
if (windowRatio < videoRatio) {
if (window.innerHeight > 50) { /* smallest video height */
video.height = window.innerHeight;
} else {
video.height = 50;
}
} else {
video.width = window.innerWidth;
}
};
HTML5 Video scale modes?
I figured it out by using the same function I wrote about here.
If you have a element on the page, this jQuery resizing function will scale the video to be full bleed of the browser window.
By changing the browserHeight and browserWidth variables you could have the video scaled to fit a DIV (make sure you set that DIV to overflow:hidden).
This function will also resize dynamically with the browser window.
var sxsw = {
full_bleed: function(boxWidth, boxHeight, imgWidth, imgHeight) {
// Calculate new height and width...
var initW = imgWidth;
var initH = imgHeight;
var ratio = initH / initW;
imgWidth = boxWidth;
imgHeight = boxWidth * ratio;
// If the video is not the right height, then make it so...
if(imgHeight < boxHeight){
imgHeight = boxHeight;
imgWidth = imgHeight / ratio;
}
// Return new size for video
return {
width: imgWidth,
height: imgHeight
};
},
init: function() {
var browserHeight = Math.round(jQuery(window).height());
var browserWidth = Math.round(jQuery(window).width());
var videoHeight = jQuery('video').height();
var videoWidth = jQuery('video').width();
var new_size = sxsw.full_bleed(browserWidth, browserHeight, videoWidth, videoHeight);
jQuery('video')
.width(new_size.width)
.height(new_size.height);
}
};
jQuery(document).ready(function($) {
/*
* Full bleed background
*/
sxsw.init();
$(window).resize(function() {
var browserHeight = Math.round($(window).height());
var browserWidth = Math.round($(window).width());
var videoHeight = $('.wd-thumb-list li a').eq(0).attr('data-wd-height');
var videoWidth = $('.wd-thumb-list li a').eq(0).attr('data-wd-width');
var new_size = sxsw.full_bleed(browserWidth, browserHeight, videoWidth, videoHeight);
$('video')
.width(new_size.width)
.height(new_size.height);
});
});
Fully responsive HTML5 video
Use width
and max-height
on the <video>
element:
<div id="player-overlay">
<video>
<source src="../static/video/10s.mp4" />
<source src="../static/video/10s.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="../static/video/10s.ogv" type='video/ogg; codecs="theora, vorbis"' />
</video>
</div>
video {
width: 100%;
max-height: 100%;
}
http://jsfiddle.net/fHG69/
Also, you're missing a semicolon after background-color
. When absolutely positioning an element to fill the screen, I prefer to set top
, bottom
, left
, and right
instead of setting height
and width
.
Make HTML5 video poster be same size as video itself
You can use a transparent poster image in combination with a CSS background image to achieve this (example); however, to have a background stretched to the height and the width of a video, you'll have to use an absolutely positioned <img>
tag (example).
It is also possible to set background-size
to 100% 100%
in browsers that support background-size
(example).
Update
A better way to do this would be to use the object-fit
CSS property as @Lars Ericsson suggests.
Use
object-fit: cover;
if you don't want to display those parts of the image that don't fit the video's aspect ratio, and
object-fit: fill;
to stretch the image to fit your video's aspect ratio
Example
Related Topics
Use Initial Width for Element Not Working in Ie
Less CSS Pass Mixin as a Parameter to Another Mixin
Cross Browser Support for CSS Flexbox
Display:None VS Visibility:Hidden VS Text-Indent:9999 How Screen Reader Behave with Each One
Adding CSS Class Through Aspx Code Behind
Position Absolute and Bottom 0
Ordering in Vendor Based CSS3 VS Standard CSS3 Syntax
Center Navbar in Twitter Bootstrap 2.0
How to Adjust the Caret (Blinking Cursor) Size Inside Searchbar with CSS
CSS Drop Shadow for CSS Drawn Arrow
Responsive Design with Media Query:Screen Size
Holy Grail Layout with 100% Height
Set CSS Border Color to Text Color
Less CSS - Change Variable Value for Theme Colors Depending on Body Class
How to Color Specific Cells in a Data Frame/Table in R