为视频元素设置边框

Question

我正在使用一个 div，其中包含 3 个嵌入的视频文件，这些文件相对于页面隔开。我正在尝试为它们中的每一个添加一个白色边框，但它不会显示出来。当我把它们放在桌子上时这很有效，但是当我切换到 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%。花几分钟来改变你现有的风格，看看它们有什么效果。保留一份原件的副本，以免丢失任何重要的东西。

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