사용 가능한 모든 공간을 포함하는 전체 화면 배경 비디오

Question

기본적으로 비디오는 동일한 방법으로 작동하도록합니다. background-size:cover - 사용 가능한 모든 공간을 감추고 있습니다 (예 : http://www.aaronvanderzwan.com/maximage/examples/html5video.html). 비례 적으로 크기를 조정하고 중심에 맞춰야하지만, 여전히 사용 가능한 공간을 모두 차지하지는 않습니다.

자바 스크립트 :

$(document).ready(function(e){ 

    var $item = $(".video"); 
    var proportions = $item.width()/$item.height() 


    // shim layer with setTimeout fallback 
    window.requestAnimFrame = (function(){ 
    return window.requestAnimationFrame  || 
      window.webkitRequestAnimationFrame || 
      window.mozRequestAnimationFrame || 
      function(callback){ 
       window.setTimeout(callback, 1000/60); 
      }; 
    })(); 



    // usage: 
    // instead of setInterval(render, 16) .... 
    (function animloop(){ 
    requestAnimFrame(animloop); 
    resize(); 
    })(); 


    function resize(){ 

    // center the item 
    $item.css({"top": "50%", "margin-top":-parseInt($item.height()/2)}) 
    $item.css({"left": "50%", "margin-left":-parseInt($item.width()/2)}) 


    // scale it 
    if($(window).width()/$(window).height() < proportions){ 
     scaleProportionalByHeight($(window).height()) 
    }else{ 
     scaleProportionalByWidth($(window).width()) 
    } 
    } 



    function scaleProportionalByWidth (newWidth) { 
    $item.width(newWidth); 
    $item.height(newWidth/proportions); 
    } 

    function scaleProportionalByHeight (newHeight ) { 
    $item.height(newHeight); 
    $item.width(newHeight * proportions); 
    } 

}) 

HTML :

<video class="video" loop autoplay muted autobuffer="autobuffer"> 
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4"> 
</video> 

Answer 1

당신은 그냥 사용할 수 없습니다 CSS? 이 같은

:

HTML

<video loop autoplay muted autobuffer="autobuffer" id="myVideo"> 
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4"> 
</video> 

CSS

video#myVideo{ 
    position: fixed; right: 0; bottom: 0; 
    width: auto; height: auto; z-index: -100; 
    min-width: 100%; min-height: 100%; 
    background-size: cover; 
}