HTML 비디오 태그를 맨 위에 정렬 할 수없는 이유는 무엇입니까?

저의 목표는 비디오가 1080p 화면의 상위 90 %를 차지하게하여 아래쪽 10 %가 텍스트로 사용되도록하는 것입니다.HTML 비디오 태그를 맨 위에 정렬 할 수없는 이유는 무엇입니까?

아무리 동영상을 사용해 보아도 결코 맞지 않거나 정렬되지 않습니다.

html 비디오 태그로이 작업을 수행하는 데 유용한 방법이 있습니까?

<table style="width:1080px;height:100%;background-color:#888"> 
    <tr valign="top"> 
    <td width="1080px" height="90%" valign="top"> 
<video width="1080px" height="100%" src="video.mp4" autoplay loop></video> 
    </td> 
    </tr> 
    <tr> 
    <td>TEXT</td> 
    </tr> 
</table>

예 :

https://jsfiddle.net/1u1xc1sL/

출처

2016-12-06 Frank Thornton

당신은 [JSFiddle] (https://jsfiddle.net)를 만들 수 있습니까? – darrylyeo

음, '

'에서 절대적으로 할 것이 없다고 확신합니다 ... – junkfoodjunkie

'vh' 유닛을 사용할 수 있습니다. – Ricky

답변

당신은 제거 할 필요가 tdheight 및 videoheight. 전체 페이지 모드의 예를 참조하십시오.

body {width:100%; height:100%; overflow:hidden; margin:0; background-color:black;} 
 
html {width:100%; height:100%; overflow:hidden; }

<html> 
 

 
<body> 
 
    <table style="width:1080px;height:100%;background-color:#888"> 
 
     <tr valign="top"> 
 
      <td width="1080px" valign="top" align="left"> 
 
       <video width="1080px" src="http://henriksjokvist.net/examples/html5-video/video.ogg" autoplay loop></video> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td>TEXT</td> 
 
     </tr> 
 
    </table> 
 
</body> 
 

 
</html>

출처

2016-12-06 01:01:46

사용 CSS :

video { 
 
    //how far from top 
 
    top: 0px; 
 
}

<video style="background-color: black;" width="1080px" height="100%" src="video.mp4" autoplay loop>Your bowser dooes not support the video tag</video>

출처

2016-12-06 00:39:30

수정 된 답변 : 비디오 컨테이너의 비디오 비례에 맞지 않는 비율이 있습니다. 규칙에 따라 1074 x 1080이되지만 높이는 더 적어야합니다. 이 인라인 스타일은 작동하지 않습니다. width="1080px" height="100%" - 회색 영역이 비디오 영역 맨 위에 오게됩니다 ...

그리고 테이블을 100 % 높이로 만들면 해당 행 (및 해당 td 초) 그 heigth에 맞게 펼쳐질 것입니다. 그 제거 : https://jsfiddle.net/j2axmgdq/1/

출처

2016-12-06 00:47:22 Johannes

사실이지만 상단에 정렬하는 것이 더 중요합니다. –

HTML 비디오 태그를 맨 위에 정렬 할 수없는 이유는 무엇입니까?

답변

관련 문제