CODEWITHSUNDEEP
csshtmlvideoalignmenthtml-table
Jason
Jason

Reputation: 821

Why can't I get the HTML video tag to align top?

My goal is to have the video take up the top 90% of a 1080p screen leaving the bottom 10% to be used by text.

No matter what I try the video never seems to fit or align.

Is there a trick to making this work with the html video tag?

 <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>

Example:

https://jsfiddle.net/1u1xc1sL/

enter image description here

Upvotes: 4

Views: 3073

Answers (3)

Johannes
Johannes

Reputation: 67778

Edited Answer: Your video container has a proportion that doesn't fit the video proportion itself: Your rule makes it 1074 x 1080, but it's height has to be less. This inline style won't work: width="1080px" height="100%" - it causes a grey area to be on top of the video area...

And when you force the table to be 100% height, its rows (and their tds) will be stretched to fit that heigth. Remove that: https://jsfiddle.net/j2axmgdq/1/

Upvotes: 2

Alexandre Neukirchen
Alexandre Neukirchen

Reputation: 2783

You need remove td height and video height. See example in full page mode.

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>

Upvotes: 1

ca1c
ca1c

Reputation: 1295

USE 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>

Upvotes: 3

Related Questions