Now that I had created a structure for my website, 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.
Here is a gif of my video background working on desktop:
Does it work?
After testing the video background a cross the browsers it worked, it was responsive and also fixed to the screen. I then went onto test the video background on a tablet device, and noticed that the video background did not work.
And later discovered that the ‘autoplay’ attribute inserted into the html tag for the video, is not supported on tablet or mobile, making the video not work. I looked into different techniques of how I could get the video to work cross device, but there is no fix for this.
I later discovered that you can set a poster image to replace the video on tablet or mobile, but this could also be replaced with a gif which would still give off the effect of the video.