Setting border for video element

user_9012365 0
Viewed 9186

I am using a div with 3 embedded video files within it which are spaced relative to the page. I am trying to add a white border to each of them but it will not show up. This worked when I put them in a table but when I switched to a div it will not work

Here is my code-

<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>
embed video border html
1 Answers
<video style='border: 1px solid #fff;' poster="costaricathumb.jpg" controls><source 
src="visitcostarica.mp4" type="video/mp4"></video>

Adding a css border normally will work on the video element.Make sure you add it to the video and not the source

Update, using your code:

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

If you look at what’s happening here you can see that your video before was wrapped in a containing element that had a width of 28%. My example removed it from that container. That’s why the size increased when you copied my code verbatim. Now that it’s in situ. Take a moment to notice what’s happening here. The CSS properties you are using in the style attributes control how your elements look and are positioned on the page. They are also usually constrained by their parent elements. In this instance the div With the style attribute setting it’s width to 28.5%. Take a few minutes to play around changing your existing styles to see what effects they have. Keep a copy of your original so you don’t lose anything important.

Also my example will only add a border to one video, why not see if you can add it to the other two using my example

user_55525410
Related