Question

我正在使用一个带有3个嵌入视频文件的div，它们相对于页面间隔开。我试图为每个人添加一个白色边框，但它不会显示出来。当我把它们放在一张桌子里但是当我切换到一个div时它无法正常工作

这是我的代码 -

<div id="row" style="width: 28.5%">
<div style='position: relative; width: 100%; height: 0px; padding-
bottom: 60%;'>
<video style='position: absolute; left: 15%; top: 0px; width: 100%; 
height: 100%' poster="makerthumb.jpg" controls><source 
src="makermarketinggroup.mp4" type="video/mp4"></video>
<video style='position: absolute; left: 123%; top: 0px; width: 100%; 
height: 100%' poster="realestatethumb.jpg" controls><source 
src="realestatead.mp4" type="video/mp4"></video>
<video style='position: absolute; left: 231%; top: 0px; width: 100%; 
height: 100%' poster="costaricathumb.jpg" controls><source 
src="visitcostarica.mp4" type="video/mp4"></video>
</div>
</div>

Answer 1

<video style='border: 1px solid #fff;' poster="costaricathumb.jpg" controls><source 
src="visitcostarica.mp4" type="video/mp4"></video>

添加css边框通常适用于video元素。请务必将其添加到video而不是source

使用您的代码进行更新：

<div id="row" style="width: 28.5%">
<div style='position: relative; width: 100%; height: 0px; padding-
bottom: 60%;'>
<video style='position: absolute; left: 15%; top: 0px; width: 100%; 
height: 100%; border: 1px solid #fff;' poster="makerthumb.jpg" controls><source 
src="makermarketinggroup.mp4" type="video/mp4"></video>
<video style='position: absolute; left: 123%; top: 0px; width: 100%; 
height: 100%' poster="realestatethumb.jpg" controls><source 
src="realestatead.mp4" type="video/mp4"></video>
<video style='position: absolute; left: 231%; top: 0px; width: 100%; 
height: 100%' poster="costaricathumb.jpg" controls><source 
src="visitcostarica.mp4" type="video/mp4"></video>
</div></div>

如果你看看这里发生了什么，你可以看到你之前的视频被包裹在一个宽度为28％的包含元素中。我的示例将其从该容器中删除。这就是为什么当您逐字复制我的代码时，大小增加了。现在它就在原位。花一点时间注意这里发生了什么。您在样式属性中使用的CSS属性控制元素在页面上的外观和位置。它们通常也受其父元素的约束。在这种情况下，div使用style属性将其宽度设置为28.5％。花几分钟时间来改变现有的风格，看看它们有什么效果。保留原件的副本，这样就不会丢失任何重要内容。

此外，我的示例只会为一个视频添加边框，为什么不看看是否可以使用我的示例将其添加到其他两个

设置视频元素

1 个答案: