1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53
|
$(function(){
var windowH = $(window).height();
var wrapperH = $('.overlayvideo').height();
if(windowH > wrapperH) {
$('.overlayvideo').css({'height':($(window).height())+'px'});
}
$(window).resize(function(){
var windowH = $(window).height();
var wrapperH = $('.overlayvideo').height();
var differenceH = windowH - wrapperH;
var newH = wrapperH + differenceH;
var truecontentH = $('#myvideo').height();
if(windowH > truecontentH) {
$('.overlayvideo').css('height', (newH)+'px');
}
resizer();
})
});
$(function(){
var windowH = $(window).height();
var wrapperH = $('.overlay').height();
if(windowH > wrapperH) {
$('.overlay').css({'height':($(window).height())+'px'});
}
$(window).resize(function(){
var windowH = $(window).height();
var wrapperH = $('.overlay').height();
var differenceH = windowH - wrapperH;
var newH = wrapperH + differenceH;
var truecontentH = $('#myvideo').height();
if(windowH > truecontentH) {
$('.overlayvideo').css('height', (newH)+'px');
}
resizer();
})
});
var container = document.getElementById('overlayvideo');
var video = document.getElementById('myvideo');
var ratio = 54/96; //this is why the 56.25% padding hack exists
function resizer() {
var width = parseInt(window.getComputedStyle(container)['width'], 10);
var height = (width * ratio);
video.style.width = width + 'px';
video.style.height = height + 'px';
video.style.marginTop = '0'; //~732px wide, the video border is about 24px thick (24/732)
container.style.height = (height * 1) + 'px'; //0.88 was the magic number that you needed to shrink the height of the outer container with.
} |
Partager