試圖讓我的視頻總是充滿我的容器

我有DIV變量的一個div裏面的視頻，寬度和高度都驚歎

<div class="videoSlpash"> 
    <video id="video_background" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0" > 
     <source src="<?php echo get_template_directory_uri(); ?>/videos/splash.webm" type="video/webm"> 
     <source src="<?php echo get_template_directory_uri(); ?>/videos/splash.mp4" type="video/mp4"> 
     <img src="<?php echo get_template_directory_uri(); ?>/img/staticbacbkground.jpg" class="headerImage imgFullWidth" alt=""> 
    </video> 
</div>

和視頻的尺寸爲1600x800

現在我轉圈圈這裏試圖拿出數學得到這個工作，但如果我是正確的英語有人也許能夠幫助

我需要發生的是，如果容器可以說：

1600×900 - 它需要100％的視頻的高度或它不會填充容器 1000×400 - 它必須是100％的寬度以便它填充容器

如果視頻的比率高度不足以填充容器使其達到100％高度，則視頻始終必須填充容器，如果其配給寬度不足以填充容器將100％寬

真的希望這有意義

我會爲u唱的JQuery做什麼，我需要的只是需要一些指點

下面

是我在哪裏達，我知道它的都錯了

function resizeDiv() { 
    vph = $(window).height(); 
    nav = $('.headerWrap').height() - 10; 
    vpw = $(window).width(); 
    hei = vph - nav + 4; 
    vh = $('#video_background').height(); 
    vw = $('#video_background').width(); 


    $('.videoSlpash').css({'height': hei + 'px'}); 
    $('.videoSlpash').css({'padding-top': nav + 'px'}); 



if ((vpw > 1600) || (hei < 800)) { 
    $('#video_background').css({'height': 'auto'}); 
    $('#video_background').css({'width': '100%'}); 
    console.log('bg 1'); 
    console.log('Height '+hei); 
    console.log('vpw ' +vpw); 

} else if ((vpw < 1600) || (hei > 800)) { 
    $('#video_background').css({'height': '100%'}); 
    $('#video_background').css({'width': 'auto'}); 
    console.log('bg 3'); 
    console.log('Height '+hei); 
    console.log('vpw ' +vpw); 

} else if ((vpw > 1600) || (hei > 800)) { 
    $('#video_background').css({'height': '100%'}); 
    $('#video_background').css({'width': 'auto'}); 
    console.log('bg 2'); 
    console.log('Height '+hei); 
    console.log('vpw ' +vpw); 

} else if ((vpw < 1600) || (hei < 800)) { 
    $('#video_background').css({'height': '100%'}); 
    $('#video_background').css({'width': 'auto'}); 
    console.log('bg 4'); 
    console.log('Height '+hei); 
    console.log('vpw ' +vpw); 


    }

奇

來源

2014-01-27 odd

我認爲你需要使用'&&'來得到你想要的結果。你最後兩個'else if's將永遠不會被擊中。還可以使用'> ='和'<='，因爲寬度和高度可以完全是這些數字。 – Jack

遺憾的那些日子裏，一個我固定它自己

function resizeDiv() { 
     vph = $(window).height(); 
     nav = $('.headerWrap').height() - 10; 
     vpw = $(window).width(); 
     hei = vph - nav + 4; 
     actualH = (800/1600 * vpw); 

     $('.videoSlpash').css({'height': hei + 'px'}); 
     $('.videoSlpash').css({'padding-top': nav + 'px'}); 

     if (actualH < hei) { 
     $('#video_background').css({'height': '100%'}); 
     $('#video_background').css({'width': 'auto'}); 
     } 

    else { 
    $('#video_background').css({'height': 'auto'}); 
    $('#video_background').css({'width': '100%'}); 
    } 
}

來源

2014-01-27 17:05:41 odd

試圖讓我的視頻總是充滿我的容器

回答

相關問題