爲什麼我不能使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 s）將被拉伸以適應高度。刪除：https://jsfiddle.net/j2axmgdq/1/

來源

2016-12-06 00:47:22 Johannes

是真實的，但更重要的是它與頂部對齊。 –

相關問題