-1

I'm trying to put a video element at the top of the screen, but using "top: 0;" doesn't put it at the very top, instead it makes a small border between the element and the edge of the page

<style>
    video {
        top: 0;
        height: 746px;
    }
</style>

    <video controls>
        <source src="wheel/wheel.mp4" type="video/mp4">
    </video>

Here's an image enter image description here

Johannes
  • 64,305
  • 18
  • 73
  • 130
ßamuel
  • 35
  • 7

3 Answers3

1

Because that position is relative, try using position: absolute instead:

video {
  position: absolute;
  top: 0;
  left: 0;
  height: 746px;
}
Joan Lara
  • 1,362
  • 8
  • 15
  • @RenevanderLende *Also, body as the main parent is relative by default.* --> no it's not. there is no element relative by default, all the elements are static. And if no element is positioned, the viewport will be used as reference (not the body) – Temani Afif Jan 02 '23 at 23:21
  • @TemaniAfif, my bad, I removed the original comment. – Rene van der Lende Jan 02 '23 at 23:24
1

That's the browser default margin of body. Add html, body { margin: 0; } to avoid that.

Johannes
  • 64,305
  • 18
  • 73
  • 130
0

This way it also worked here, you define a * and put margin 0, because it will remove this border from all sides that already comes by custom, if you are going to follow the css correctly, first clean everything that is already on the page!

<style>
    *{
        margin: 0;
    }
    video {
        top: 0;
        height: 746px;
    }
</style>

    <video controls>
        <source src="wheel/wheel.mp4" type="video/mp4">
    </video>
Rafael Meira
  • 1
  • 1