maintain image position while scaling video

Question

I have a few see-through click elements over a video.. when changing the aspect ratio of the browser the positioning of the elements messes up which causes click action to not happen when you click on an animation.

I use % but for some reason it still doesn't position it correctly on multiple screen sizes.

CSS:

#vidKlik1{
    width: 8%;
    height: 30%;
    top: 148%;
    left: 16%;
}

HTML:

    <div class="popup">
        <video preload="auto" autoplay="autoplay" loop="loop" id="background2">
            <source src="background/background2.mp4" type="video/mp4"> </source>
            <source src="background/background2.ogv" type="video/ogg"> </source>
            <source src="background/background2.webm" type="video/webm"> </source>  
        </video>

        <a href="#popup-box" class="popup-window">
            <img src="images/klik.jpg" id="vidKlik1">
        </a>

        <a href="#popup-box" class="popup-window">
            <img src="images/klik.jpg" id="vidKlik2">
        </a>

        <a href="#popup-box" class="popup-window">
            <img src="images/klik.jpg" id="vidKlik3">
        </a>

        <a href="#popup-box" class="popup-window">
            <img src="images/klik.jpg" id="vidKlik4">
        </a>        
    </div>

and for some reason I also have to use top: 148% because if I take top: 100% it only positions it 50% from the top of the page, right in between 2 video's

Is there any way to fix this? I'am already using % but for some reason it just won't position the image correctly.. I've also tried using VH and VW, I just don't know which other things I could do to make the image always appear on a certain position when the video behind it scales.

In short: I have an image which I want to scale with the video behind it to make the video have clickable interactions, however it often goes too far down.

Answer 1

To follow up on my comments, here's a working fiddle

CSS

.popup { 
  position:relative;
  width:75%;
}

.popup video { width:100%;}

.popup a { position:absolute; z-index:1000;}

#vidKlik1 { top:5%; left:5%; }

HTML

<div class="popup">
    <video preload="auto" autoplay="autoplay" loop="loop" id="background2">
        <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4"></source>
        <source src="http://vjs.zencdn.net/v/oceans.webm"></source>
    </video> 

    <a href="#popup-box" class="popup-window" id="vidKlik1">
        <img src="http://placehold.it/50x50" />
    </a>
</div>

The important parts

• popup needs to be position:relative
• the <a> needs to have an id so you can position it independently of the others

Answer 2

I imagine this won't work because the screen's aspect ratio isn't exactly the same as the video, therefore the percentages aren't necessarily equivalent. When you resize the window, are there black bars on any side of the video? Those black areas will mess with your percentages.

Answer 3

Browsers can be inconsistent with how they behave when the screen resolution or orientation changes. For consistent behavior across browsers, you'll want to use jQuery (since you have it listed in your tags) to handle a resize event, and re-calculate your popup position based on the new window dimensions and/or video position.