- This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
Viewing 8 posts - 1 through 8 (of 8 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
I’m creating a website where the background basically uses a video.
It’s all fine except when I change the size of my browser window there are black borders either at the top or the bottom.
Any way around this? Maybe make the black background white to match the white in the video?
[MOD EDIT – Link removed at OP’s request]
Set the width and height of the video to 100% in html.
Then in css, set the height only to 100%.
just got rid of the width in css and it made no difference
#backgroundvideo {
height: 100%;
position: fixed;
left: 0;
top: 0;
bottom:0;
right:0;
margin: 0;
padding:0;
width: 100%;
z-index: -999;
}
this plugin could help you
http://dfcb.github.io/BigVideo.js/
if you have a look at their code can get an idea of how its done.
they basically check to see if width > height then depending on aspect radio of the window and aspect radio of the video
they apply a width and height and then center the video with some negative margins.
all this to have your video displaying right and not streched
Do this:
.container{
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
z-index: -1;
}
I’m actually using a theme and uploaded the video through an admin control pannel. I found the code though:
// Play Youtube and Other Video files
if ($videofile) {
?>
}
?>
the css to that is:
backgroundvideo {
height: 100%;
position: fixed;
left: 0;
top: 0;
bottom:0;
right:0;
margin: 0;
padding:0;
width: 100%;
z-index: -999;
}
hi can i please get this thread deleted or the url i posted in the first post removed?
Thanks.
Done