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％，因为如果我采取顶部：100％它只从页面顶部定位50％，就在两个视频之间

有什么方法可以解决这个问题吗？我已经在使用％但是由于某种原因它只是不能正确定位图像..我也尝试过使用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 ，以便您可以独立于其他人定位

Answer 2

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

Answer 3

我认为这不会起作用，因为屏幕的宽高比与视频完全不同，因此百分比不一定相等。当您调整窗口大小时，视频的任何一侧都有黑条吗？那些黑色区域会弄乱你的百分比。

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

3 个答案: