Почему я не могу получить тег видео HTML для выравнивания вершины?

Моя цель состоит в том, чтобы видео занимало верхние 90% экрана 1080p, оставляя нижние 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

ПРИМЕНЕНИЕ УС:

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 s) будет растянута, чтобы соответствовать этой вершине. Удалить, что: https://jsfiddle.net/j2axmgdq/1/

источник

2016-12-06 00:47:22 Johannes

true, но это имеет большее значение, поскольку оно выровнено по верху. –

Смежные вопросы