전체 화면 배경 비디오

내가 한 페이지에 전체 화면 배경 비디오를 표시하기 위해 HTML5 비디오 요소를 사용하고 있습니다 :전체 화면 배경 비디오

HTML

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

이 잘 작동

<video poster="<?= MEDIA_URL ?>images/video-placeholder.jpg" autoplay="" loop="" muted="" preload=""> 
    <source src="<?= MEDIA_URL ?>video/flower.mp4" type="video/mp4"> 
    <source src="<?= MEDIA_URL ?>video/flower.ogv" type="video/ogg"> 
    <source src="<?= MEDIA_URL ?>video/flower.webm" type="video/webm"> 
</video>

CSS, 단, 비디오의 1920 x 1080은 작은 화면 (예 : 1440 mac)에서 대부분의 비디오가 잘립니다.

동영상을 너무 많이 자르지 않고이를 달성 할 수있는 다른 방법에 대해 알고있는 사람이 있습니까?

출처

2014-07-13 Luke Palmer

'width : 100 %;'를 설정하고'height : auto; '를 남겨 두십시오. – 131

@ahmadalbayati 이로 인해 불행히도 특정 화면 크기에서 비디오 위아래에 공백이 생깁니다! –

시도 :

width: 100%; 
height: 100%;

나는 그래서 그 거 일을 생각한다. 또는이 그렇다면 그들이 특성을 변경 한

<div></div>

내부 태그

video

넣어보십시오.

문제를 해결하려면 알려주십시오. 그들은 단지 크롬에서의 코스 일 (캔버스에 비디오를 추가 한 후) -webkit-캔버스 또는 더 나은 당신이 -moz-요소 사용할 수 있습니다

는

출처

2014-07-13 14:36:15 user3161739

당신은 배경을 시도 할 수 있습니다 감사 그리고 파이어 폭스 그래서 그것은 아마도 당신이 찾고있는 게 아니에요하지만 이것들은 알아두면 좋은 두 가지 방법이 있습니다 : 여기에 http://updates.html5rocks.com/2012/12/Canvas-driven-background-images과 bout -moz-element : https://developer.mozilla.org/en-US/docs/Web/CSS/element에 대한 -webkit-canvas를 읽을 수 있습니다.

출처

2014-07-13 14:36:31 RanSch

그래, 슬프게도 IE에서 작동해야한다. –

전체 화면 배경 비디오

답변

관련 문제