CLIENT PROJECT: VIDEO BACKGROUND CODE

 

codeicon

 

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.

HTML

Here is the code for the video, taken from the ‘index.html’ file:

videobackground

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.
  • fullscreen-bg
    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’.

CSS

videobackground2

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:

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s