I decided to look into implementing the video background to my website. One of the main things I wanted to do with this background, is make it full screen for when the user first enters into the website so it engulfs the screen of the users device, and also wanted the video background to stick the screen and follow the user all the way down to the footer.
First of all I had to implement my video into the ‘index.html’ file, making sure that the video was not contained within the main container that wraps itself around the entirety of the website, this stops any css rules applied to the video container to conflict with the main wrappers css rules.
Here is the code for the video, taken from the ‘index.html’ file:
This piece of code is made up of two different containers, ‘videobackground’ and ‘fullscreen-bg’, within both of these containers is the actual video taken from the vids folder within the file tree.
- videobackground container
This container will allow for the video to be fixed to the screen, and will also set the height and width through css.
this is the container is linked directly to the video, and it will allow for the css to make the video fill the outer container of ‘videobackground’.
Then through the css the video is set to 100% of the screen size it is being viewed on, and also ‘web-kit’ is added to the css code, to make the video fit the same across each different browser.
A GIF of this working can be seen on my blog: