Jquery 缩放视频时保持图像位置

我在视频上有一些透明的点击元素。。更改浏览器的纵横比时，元素的定位会出错，这会导致在单击动画时不会发生单击操作

我使用%但由于某些原因，它仍然无法在多个屏幕大小上正确定位

CSS:

HTML:

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

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

---

简而言之：我有一个图像，我想与后面的视频一起缩放，以使视频具有可点击的交互，但是它通常会下降太多。

浏览器可能与屏幕分辨率或方向改变时的行为不一致。为了在浏览器间保持一致的行为，您需要使用jQuery（因为您的标签中列出了它）来处理调整大小事件，并根据新的窗口尺寸和/或视频位置重新计算弹出位置。

我想这不会起作用，因为屏幕的纵横比与视频不完全相同，因此，百分比不一定相等。调整窗口大小时，视频的任何一侧是否有黑色条？这些黑色区域会影响你的百分比。

要跟进我的评论

CSS

HTML

重要部分

• 弹出窗口

  需要是

  位置：相对的

• 需要有一个id，这样您就可以独立于其他代码对其进行定位

---

请您在视频中发布一些相关代码。解决方案很简单，您的视频和链接需要放在一个容器中。然后，容器接收视频的大小和高度。链接位于视频顶部（位置：绝对；z索引：1000），它将根据容器重新定位自身。我可以给你举个例子，但是我需要一些代码来处理。@vyx.ca我已经编辑了我的问题，这样它就有了更多的代码，但是我试着做了你建议的第一件事，但是它没有按照我想要的那样工作，也许我用你的代码做了一些错误的事情，破坏了网站，就像我的jQuery代码不会使我的图像可见一样。@Gerwin因为您在jQuery中使用ID，所以图像不可见？如果是这样，那不是问题。。。在图像上保留ID，并在链接上使用其他ID。像这样，使用以下代码它们不会变得可见，当删除它们时，它们会变得可见。弹出{位置：相对；宽度：100%；}。弹出视频{宽度：100%；}。弹出a{位置：绝对；z索引：1000；}刚刚更改。弹出到#测试，它修复了问题。但是当我重新缩放图像时，图像不保持其位置window@Gerwin如果你看我的例子，当页面重新缩放时，它们会保持它们的位置。您需要调整代码。我只得到了一个你所拥有的例子。为了帮助你更多，我需要完整的代码。。。链接。。。

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

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

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

.popup video { width:100%;}

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

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

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