전체 블리드 동영상, 가로 세로 비율 유지, 중앙 자바 스크립트, 순수 자바 스크립트

Question

내 요소의 가로 세로 비율을 유지하고 싶지만 전체 블리드 또는 다소 풍부한 브라우저 경험을하고 싶습니다. 비디오는 새 브라우저 창 크기를 수용하기 위해 위 또는 아래로 있어야하지만 브라우저 창 중앙에 위치해야합니다. 때로는 일부 비디오가 잘릴 것입니다. 순수한 JS를 사용하여 비디오 요소에 대한 배경 표지 CSS 속성을 다시 만들려고하는데, 그게 상상하는 데 도움이된다면. 불행하게도

function getWinSize(){ 
    var wid = 0, hei = 0; 

    if (document.documentElement && document.documentElement.clientHeight){ 
     wid = parseInt(window.innerWidth,10); 
     hei = parseInt(window.innerHeight,10); 
    } else if (document.body){ 
     wid = parseInt(document.body.offsetWidth,10); 
     hei = parseInt(document.body.offsetHeight,10); 
    } 
    return [wid,hei]; 
} 

this.resize2 = function(){ 
    fullBleedVideoPlayer(); 
}; 

function fullBleedVideoPlayer() { 
    var viewport=getWinSize(); 
    var videoRatio = 1080/1920; 
    var browserHeight = viewport[0]; 
    var browserWidth = viewport[1]; 
    var tmp_windowRatio = viewport[1]/viewport[0]; 
    if (videoRatio > tmp_windowRatio) { 
     tmp_height = Math.round(browserWidth * videoRatio); 
     _player.style.width= browserWidth+ "px"; 
     _player.style.height= tmp_height+ "px"; 
     _player.style.marginLeft = 0 + 'px'; 
     _player.style.marginTop = -Math.round((tmp_height - browserHeight)/2) + 'px'; 
    } else { 
     tmp_width = Math.round(browserHeight * (1/videoRatio)); 
     _player.style.width= tmp_width+ "px"; 
     _player.style.height= browserHeight+ "px"; 
     _player.style.marginLeft = -Math.round((tmp_width - browserWidth)/2) + 'px'; 
     _player.style.marginTop = 0 + 'px'; 
    } 
} 

,이 CSS가 재현되지 않습니다

.bkgdCover{ 
    background: no-repeat center center; 
-webkit-background-size: 100% 100%; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
} 

다음

순수 자바 스크립트에서 동일한 작업을 수행하는 나의 시도이다 : 사람들을 위해 그 heres는 다음, 무엇인지 모르는 사람들 덮개. 내가 실수 한 곳을 보거나 자신을 똑같이 해낸다면, 나는 당신의 이야기를 듣고 싶습니다. 순수한 JS 솔루션 만하시기 바랍니다.

Answer 1

완전히 완전히 전체 화면이 아니었던 것을 제외하고 나는 방금 이렇게했습니다. 450px'ish '의 높이를 가진 페이지 헤더의 배경 비디오였습니다. 25vw를 사용하고 있기 때문에 뷰포트 너비에 따라 높이가 변하기 때문에 저는 ish라고 말합니다. 나는 기본적으로 비디오가 중심에 머물길 원했지만 어떻게 했습니까?

HTML

<section id="homepage--hero"> 
    <div class="fullpage-video-wrapper"> 
    <video id="video_background" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0"> 
     <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4"> 
     <source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm"> 
     <!-- doesnt support video --> 
     <img src="#" style="width: 100%; height: auto;" /> 
    </video> 
    </div> 
</section> 

CSS

#homepage-hero { 
    display: block; 
    height: 35vw; 
    width: 100%; 
    position: 
    relative; 
    overflow: hidden; 
} 

.fullpage-video-wrapper { 
    position: absolute; 
    bottom: 0px; 
    left: 0px; 
    min-width: 100%; 
    min-height: 100%; 
    width: auto; 
    height: auto; 
    z-index: -1000; 
    overflow: hidden; 
} 

.fullpage-video-wrapper { 
    min-height: 100%; 
    min-width: 100%; 
} 

JS 어떤이가하는 것입니다 것은 하단에 배치, 창 크기를 조정하면 비디오도 같은 비율을 유지하게

if($('.fullpage-video-wrapper').length > 0) { 
    var videoWrapper = $('.fullpage-video-wrapper'), 
     videoParentWrapper = $(videoWrapper).parent(); 

    if($(videoWrapper).height() > $(videoParentWrapper).height()) { 
    var difference = ($(videoWrapper).height() - $(videoParentWrapper).height())/4 
    $(videoWrapper).css({ 
     bottom: -parseInt(difference) 
    }); 
    } 

    $(window).resize(function(){ 
    if($(videoWrapper).height() > $(videoParentWrapper).height()) { 
     var difference = ($(videoWrapper).height() - $(videoParentWrapper).height())/4 
     $(videoWrapper).css({ 
     bottom: -parseInt(difference) 
     }); 
    } 
    }); 
} 

홈페이지 영웅의 이름을 알 수 없었습니다.이 때문에 영감을 얻지 않고도 잘 반응 할 수있었습니다. 비디오 래퍼의 둥근 색상이지만, 분명히 중앙에 위치하지는 않습니다. jQuery는 비디오 래퍼 요소 높이와 부모 요소 높이의 차이를 오프셋하도록 비디오 버퍼를 설정하는 것입니다. 종횡비를 동일하게 유지하면서 필요할 때 비디오를 흐리게 만들지 만 수직으로 부모 요소에 중앙에 배치되도록합니다.

이것은 약 1 시간 전에 작업했기 때문에 매우 거칠었기 때문에 재 작업을해야하고 전화를 걸어야 할 것이라고 확신합니다.하지만이 길을 따라 가면 도움이 될 것입니다. 비디오 요소 또는 비디오 랩 요소 인 outerHeight 및 뷰포트 높이에 대한 높이 검사를 제외하고 동일한 해결책입니다.