How to place a border over HTML5 video using CSS3
I am creating a website with centered video, the problem is inside the video there are black lines on the right side to the left, they are not very big, but they are bugging me and my colleagues.
Then I got the idea to set a tiny border with the same color as my background inside this video element:
#vid {
position: float;
margin-top: 100px;
height: 480px;
width: 854px;
border: 3px solid #ECECEC;
box-sizing: border-box;
}
<video id="vid" loop autoplay autobuffer controls muted>
<source type="video/mp4" src="http://www.mh-content.de/mh/video/MuH_Film_s_1.mp4">
</source>
<source type="video/webm" src="http://www.mh-content.de/mh/video/MuH_Film_s_1.webm">
</source>
<source type="video/ogg" src="http://www.mh-content.de/mh/video/MuH_Film_s_1.ogg"></source>
</video>
box-sizing
from this site . I downloaded this but the border was not visible. Tested it on a regular no video Div box and it works just fine. I also tried putting the video in an additional div container and applying the attribute to the container
box-sizing: border-box
, but the visible border is not showing.
Any help is appreciated :)
source to share
The position element does not accept a float value. see http://www.w3schools.com/css/css_positioning.asp for a list of accepted css values.
I'm not really sure why you have a downline other than a css error, I can only guess who did it, didn't understand that the border in the video was part of the video and it wasn't your own fault.
The following solution puts the video in a box that is framed by another div that has a border on it.
.vid-border{
position: relative;
height: 480px;
width: 854px;
border: 5px solid black;
overflow: hidden;
}
#vid {
position: absolute;
top:-5px;
left:-5px;
height: 480px;
width: 854px;
}
<div class="vid-border">
<video id="vid" loop autoplay autobuffer controls muted>
<source type="video/mp4" src="http://www.mh-content.de/mh/video/MuH_Film_s_1.mp4">
</source>
<source type="video/webm" src="http://www.mh-content.de/mh/video/MuH_Film_s_1.webm">
</source>
<source type="video/ogg" src="http://www.mh-content.de/mh/video/MuH_Film_s_1.ogg"></source>
</video>
</div>
Play with the width and height of the vid-border for video overlay.
source to share