How to make sure a div is always positioned on a certain location of a background video

Question

In my project, I have a background video that always scales to cover 100% of the screen (even if the sides are clipped). However, in the video there are a few points of interest and what I'm trying to do is position divs on top of each of these areas so that I can detect and handle hover events. However, after many tries, I'm not able to make the divs stick to that one location even as the window gets resized. Is there any way to do this? I know the aspect ratio of the video.

Any help is appreciated!

EDIT:

I made a sample project on jsfiddle to show what I'm trying to do. I would like the blue div box to always stay directly on the peak of the mountain in the image. Even as the image changes size, the div should stay on top of it.

Here's the following code.

.son1 {
  width: 20px;
  height: 20px;
  background: blue;
  position: absolute;
  padding: 10px;
  left: 100px;
  top: 160px;
}

img {
  height: 100vh;
  width: 100%;
  object-fit: cover;
  position: absolute;
  border-style: solid;
}

<html>

<head>
  <title>Check this</title>
</head>

<body>
  <div>
    <img src="https://images.all-free-download.com/images/graphiclarge/evening_landscape_210502.jpg">
    <div class="son1"></div>
  </div>
</body>

</html>

This is possible, but without any details or code snippets, we're shooting a bit in the dark here. I'd suggest you position the divs using percentages, that way it stays at the same plave no matter the scale. — Salketer, Jun 30 '23 at 07:39
@Salketer. Hey, thanks for the response. So actually, I'm making this site on Webflow, so it's a little hard for me to share the code, but for this section I'm adding my own custom code. The problem with using percentages is that it only stays a percentage from the parent, not the video itself. The video scales to fit 100vw and 100vh, regardless of whether it's clipped on the top or bottom. What I'm trying to do is position this div on top of the specific part of the video (regardless if it's totally on screen or not). Kind of like it's static. Let me know if that makes a more sense. — Rahul Bir, Jun 30 '23 at 08:10
@Salketer I made a jsfiddle project and added some code above. — Rahul Bir, Jun 30 '23 at 08:24

score 0 · Answer 1 · answered Jun 30 '23 at 08:23

0

I think you could place the div inside of the video tag and than position it with percentage. Then the position remains the same, no matter what screen size the client has. With z-index you can also set the layer of the div above the video.

answered Jun 30 '23 at 08:23

Jannow

1
1

The video scales to always fill up the whole screen. If I add a div in between, would the div scale to go out of bounds? I also just pasted some jsfiddle stuff above which shows the concept I'm trying to achieve but with an image rather than a video. – Rahul Bir Jun 30 '23 at 08:25

Salketer · Answer 2 · 2023-06-30T09:29:00.080

Ok, hang tight. Since you know the ratio of the video, you can create a div that will have the exact same ratio, you then position it exactly on top of the video, then you position things inside it.

The reason you need a div like that is because object-fit does not change the size of the container, just the content. This means the container will never be bigger even tough the media is.

I'm building on an old answer of mine to create a div of the correct aspect ratio without hardcoded width/height. Maintain the aspect ratio of a div with CSS

body {
  margin: 0
}

div.holder {
  background-color: red;
  display: inline-block;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

svg,
img {
  background-color: blue;
  display: block;
  height: auto;
  width: auto;
  min-width: 100%;
  min-height: 100%;
}

.content_sizer {
  position: relative;
  display: inline-block;
  height: 100%;
}

.content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50vw - 50%);
  right: calc( 50% - 50vw);
  background-color: rgba(155, 255, 0, 0.5);
}

.crosshair {
  position: absolute;
  top: 50%;
  left: 50%;
  border-left: 1px solid black;
  border-top: 1px solid black;
  height: 10px;
  width: 10px;
}

<div class="holder">
  <div class="content_sizer">
    <svg width=200 height=50 />
    <div class="content">
      <div class="crosshair">
        <div>
        </div>
      </div>
    </div>

So, we make that said div the size of the video since it will respect the aspect ratio given (by setting width and height of the SVG, making sure it is smaller than the smallest possible size). Please see the other answer for more details on how the aspect ratio thing works.

The div.content is then shift left by 50vw - 50% visible center vs container center.

Inside the div.content, any absolute positioning will be done according to the size of the video (too much left or right and it won't be seen). Since we want to point to sepcific places in the video, percentages will be the best unit for setting a position that will follow according to the scaling. Remember that percentages can be decimals to have the best fit possible.

Since we want both elements to overlap, you will need to put div.holder in absolute position so it can be over the video.

Also, the video interactions may not work since the user will be clicking the div instead of the video. A workaround should be reachable by using pointer-events: none; on the div.holder and adding back pointer-events: auto; on elements inside that you'd like to have interactions with.

How to make sure a div is always positioned on a certain location of a background video

2 Answers2