테스트 사이트 - 개발 중인 베타 버전입니다

배경에 동영상 삽입 관련 질문드립니다. 채택완료

월모 10년 전 조회 6,018

[code]

<style>
#videobcg {
     position: fixed;
     top: 0px;
     left: 0px;
     min-width: 100%;
     min-height: 100%;
     width: auto;
     height: auto;
     z-index: -1000;
     overflow: hidden;
}
</style>
<video id="videobcg" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0">
     <source src="movie/second.mp4" type="video/mp4">
          죄송합니다. HTML5 이하 (익스플로러9 이하) 버젼에서는 지원하지 않습니다.
</video>

[/code]

 

이런식으로 홈페이지 배경에 동영상을 넣어주었습니다.

 

그런데 동영상 height 부분이 아래에서 125px가 짤리더군요.

 

동영상의 width는 1920, height 는 1080 입니다.

 

테스트한 모니터의 해상도도 1920*1080 의 해상도인데 왜 아래부분이 짤리는 걸까요?

 

고수님들의 답변 기다립니다..

댓글을 작성하려면 로그인이 필요합니다.

답변 2개

채택된 답변
+20 포인트

</p><p><script></p><div><span style="font-size: 14.6666669845581px;">    document.getElementById("videobcg").style.width = window.innnerWidth;</span></div><div><span style="font-size: 14.6666669845581px; line-height: 1.5;">    document.getElementById("videobcg").style.height = window.innnerHeight;</span><p><span style="font-size: 11pt; line-height: 1.5;"></script></span></p><p>

 

</span></p><p style="font-size: 14.6666669845581px;"><script></p><p style="font-size: 14.6666669845581px;">    $("#videobcg").css({width : window.innerWidth, height : window.innerHeight});</p><div style="font-size: 14.6666669845581px;"><p><span style="font-size: 11pt; line-height: 1.5;"></script></span></p></div><p><span style="font-size: 14.6666669845581px; line-height: 1.5;">
 

 

둘중에 아무거나 쓰시면되요.

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

f11하시면 잘 보이실꺼에요.

 

모니터 전체 해상도가 1920*1080이죠... 브라우저 위에 브라우저이름, 메뉴나오는거랑 옆에 스크롤도 있으면 그것도 빼셔야죠...

 

그리고 모든 사용자가 1920*1080일수는 없으니깐 자스로 현재 보고있는 크기를 확인한다음에 해주시는게좋을것같아요.

 

window.innerHeight, window.innerWidth << 이게 현재 브라우저 화면중 위쪽 메뉴랑 옆쪽 스크롤을 빼고난 공간이에요. 이걸로 크기 정해주시는게 좋을것같아요.

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

월모
10년 전
f11 누르니 정말 제대로 화면이 나오네요..

제가 아직 초보라.. 혹시 window.innerHeight, window.innerWidth 를 어떤식으로 크기를 정해주어야 할지 조금 더 알려 주실 수 있으신가요??

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인