전체 화면 html5 비디오의 크기 변경

Question

브라우저의 비디오 전체 기능이 작동하는 방식을 수정할 수 있습니까? 내 화면의 왼쪽에 비디오를 표시하고 오른쪽에 이미지 (실제로는 PDF)를 표시하고 싶습니다. 내가 크롬에서 CSS로 그것을 시도

:

video:-webkit-full-screen 

그리고 나에게 어떤 결과를 준,하지만 원하는 하나. 이를위한 사용자 지정 작업을 만들어야합니까? 그렇다면 어떻게하면 비디오가 브라우저의 경계에서 벗어날 수 있습니까?

Answer 1

당신이 가진 <div> 내부 <video> 태그를 삽입해야 다음과 같은 속성을 가진 height 및 width 정의하십시오 width 100 %로

.video-container { 
    position: relative; 
    height: auto; 
    width: 60%; 
} 

video { 
    width: 100%; 
    max-width: 500px; // Or whatever value on your choice 
    height: auto; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 

을 전체 브라우저 공간을 채우기 만 할 비디오가 얼마나 큰 제한 해상도와 응답 속도를 max-width 또는 max-height으로 설정할 수 있습니다. 내 대답이 당신을 돕기를 바랍니다!

편집

는 비디오 자체에 컨테이너 position: relative 및 position: absolute에 할당해야하는 div 내부에 제대로에 맞게. 국경에서 벗어나고 싶다면 동영상의 max-height 및 max-width의 크기를 조정해야합니다.

너의 것과 비슷하기 때문에이 question을 확인하십시오.