Question 197463 in Html Question posted in
Some basic documentation can be found here.

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

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

2

Answers


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

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search