调整大小DIV基于视频的大小

我创建了视频中的按钮，我已经添加该按钮的顶部<div>。但是，当我尝试调整该视频中，我该按钮与视频即我想要<div>覆盖视频中的该按钮很好，即使我尝试调整视频调整。调整大小DIV基于视频的大小

UPDATE

白盒是div --->

enter image description here

这是发生了什么，当我尝试调整视频--->

enter image description here

我试图在CSS用百分比值但仍然是不工作也许是因为外部的黑色酒吧。

更新2

.start-button { 
    width: 42%; 
    height: 19%; 
    position: absolute; 
    top: 3%; 
    left: 5%; 
    margin: 20% 0 0 24%; 
    cursor: pointer; 
}

HTML结构

<div class="container"> 
     <video id="sortedd" class="video-js vjs-default-skin" controls="false" preload="60" data-setup="{}"> 
      <source src="sortedd.mp4" type='video/mp4'/> 
     </video> 
     <div class="option-panel"> 
      <!-- Starting of the quiz --> 
      <div class="start-button"></div> 
     </div> 
</div>

来源

2015-05-02 Chaitanya

提供一些更多的信息。源代码会很好，但也可以解释错误，可能是截图，以及您试图使其工作的原因。 –

告诉我们您的代码 – dippas

我已更新该问题。对不起，我忙于考试。我知道这不是完美的，你可以请建议我的东西，我可以尝试百分比值不起作用。 – Chaitanya

好吧，这是我做的：

HTML结构

<div class="container"> 
     <video id="sortedd" class="video-js vjs-default-skin" controls="false" preload="60" data-setup="{}" width="100vw" height="56.25vh"> 
      <source src="sortedd.mp4" type='video/mp4'/> 
     </video> 
     <div class="play-button"></div> 
    </div>

的CSS样式

.play-button 
{ 
    background-color: red; 
    width: 44vw; 
    height: 9.687vw; 
    background: red; 
    max-height: 18vh; 
    max-width: 77.222vh; 
    margin: auto; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    z-index: 2147483647; 
}

很多命中和审判我不知怎么设法使其工作后。任何人都可以请解释我的高度和宽度的最大值与正常的高度和宽度之间的关系。

来源

2015-05-13 13:29:40 Chaitanya

调整大小DIV基于视频的大小

回答

相关问题