비디오 배경, 사파리에서 작동하지 않는 위치의 헤더

비디오 배경이있는 헤더를 만들려고합니다. html로 비디오를 삽입하고 비디오의 z- 인덱스를 css로 -100으로 만들었습니다.비디오 배경, 사파리에서 작동하지 않는 위치의 헤더

구글 크롬에서 잘 작동하지만 사파리에서 웹 사이트를 열면 비디오 배경의 위치가 완전히 잘못되었습니다.

이 문제를 해결할 수 없으므로 두 브라우저에서 모두 동일하게 표시됩니다.

웹 사이트는 여기에서 볼 수있다 :

video#bgvid { 
position: absolute; 
margin-top: -90px; 
width: 100%; 
z-index: -100;}

희망 나를 도울 수있는 사람이 내 CSS입니다 <header> <video autoplay loop poster="polina.jpg" id="bgvid"> <source src="/img/headerbgvideo.mp4" type="video/mp4" id="bgvid"> </video> <div class="container"> <p id="title1">Connect with the world today!</p> <p id="title2">Join the world's best social chatroom for gamers.</p>

: http://www.chatroom.guru

이 내 HTML입니다! 는 당신에게 감사

출처

2014-11-08 Mathias Spurr

당신이 절대 위치 비디오해야하는 특별한 이유가 있나요? 나는 당신이 비디오를 남겨두고 당신의'.container'를 절대적으로 위치시킬 수 있다고 생각합니다. (올바른'.container'를 목표로 조심하십시오) – skube

귀하의 의견을 보내 주셔서 감사합니다. 나는 아직도 그것을 작동시킬 수 없다. ... –

어떻게 비디오 스타일에 object-fit:cover을 추가하는 방법에 대한 :

video#bgvid { 
    object-fit:cover; 
}

출처

2014-11-10 16:35:02 skube

No는 아직도 일하지 않는다 –

Hmm. 기본적으로 다시 시작하는 것이 가장 좋을 것이라고 생각합니다. 여기 스타일링이 많이 있습니다. 또한 HTML은 처음부터 유효하지 않습니다. 예를 들어'nav'' ul'는 부적절하게 중첩되어 있습니다. 원하는 것을하기가 어렵지는 않지만 현재 코드에서는 불가능할 수도 있습니다. 다시 시도하고 간단하고 유효하게 유지하십시오. 그런 다음 절대 최소 스타일을 지정하십시오. – skube

비디오 배경, 사파리에서 작동하지 않는 위치의 헤더

답변

관련 문제