Self Initiated: Implementing Video Background

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.

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.

Here is a gif of my video background working on desktop:

ivybackground.gif

 

 

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.

 

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