Position a div relative to a video

Position a div relative to a video
0.0 0


Hello everyone, I was wondering if there was a way to position a div relative to the position of a video.

I’m trying to attach a button that would close the video when clicked on, and i’m trying to position this button on the top left of the video, just as it was a window on a cpu you could close.

I’m a bit lost since it seems like you can’t put a div in a video tag, and since the videos can have different width and height, I don’t really know how to get the video positions :confused:


Video in a div tag (or figure or whatever). Put a button in that div as well, then position the button over the top of the video (eg position relative on the div, position absolute on the button + the positional CSS - right, top etc).

[Edit, slightly advanced, but I’ve had to implement this umpteen times and I think it’s an issue you might stumble across] ideally you want your videos to be the same size, because (again, ideally) you want them to resize responsively, and it’s easier if you have a single size as they’ll have a consistent aspect ratio. But they aren’t and you do want resizing, you can set the video to absolute position as well, set a with/height on the div and make the video 100% width and height, and use JS to calculate resizing on the window resize event. Here’s the first example I got from Google, makes a bit.more sense if you can see what I mean (images, but works the same with video): https://www.sitepoint.com/maintain-image-aspect-ratios-responsive-web-design/