jquery - 缩放视频时保持图像位置

Question

我在视频上有一些透明的点击元素。当更改浏览器的宽高比时，元素的定位会困惑，这会导致点击动画时不会发生点击操作。

我使用 % 但出于某种原因它仍然无法在多种屏幕尺寸上正确定位。

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>

出于某种原因我还必须使用 top: 148% 因为如果我使用 top: 100% 它只会将它定位在距页面顶部 50% 的位置，就在 2 个视频之间

有什么办法可以解决这个问题吗？我已经在使用 % 但由于某种原因它无法正确定位图像。我也尝试过使用 VH 和 VW，我只是不知道我可以做哪些其他事情来使图像始终出现在后面的视频缩放时的某个位置。

简而言之:我有一张图片，我想对其背后的视频进行缩放，以使视频具有可点击的交互，但它通常会向下移动太远。

Answer 1

要跟进我的评论，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>

重要部分

• popup需要是 position:relative
• <a>需要有一个 id 以便您可以独立于其他位置放置它