Self Initiated: Creating A background Video

One very important aspect of this website, that will bring out the whole emotional aspect of the website is the video background that will appear on the hero section of the home page, and the contact footer on the other pages.

My first step was to research into how to create a video that would function at its best as a video background, and also areas I should keep in mind to make this video background fit in with modern web trends, and the big does and don’ts.

Key Pointers

Here is a list of things I came across, to deffinitly consider for a video background on a website:

  • Make sure the video is muted
    People will often be playing music whilst browsing the internet, so they do not want it to be interrupted when entering into a website. Usually when there is a video, the user activates the video themselves choosing to play it or not.
  • Browser Compatibility
    Making sure your video is compatible in each browser is very important, some do not support certain file types of code that has been used to implement the video background.
  • Simple Video With Contrast
    Making sure that the video contrast to other page elements such as text, when using a darker video make sure the content is of lighter colours, but when using a lighter video make sure the content is darker in colour.
  • Make Sure The video Reflects the Emotion Of Your Website
    Another important aspect of implementing a video background is that it really does need to reflect the emotion of your website, it can’t just be a video background that has no meaning and does not tell the user anything about the personaltiy of the company.

Resource: Envatomarket

Inspiration

After creating an understanding of what I must take into consideration before creating my video background I looked into different websites to gain inspiration from, to see how I could use my video background on my website.

I came across a website called Whiteroom, one thing I really like about the video background on this page, is how it follows the user down the page in the background, and changes colour on the different sections depending on the colour overlay of that page, here is a gif I captured to demonstrate this.

video.gif

I really like this style of video background, and fits in with my idea of using the same video for the hero section of the website for the footer as well, it means that I don’t have to implement the video into two separate containers.

Now that I had a good idea of what I needed I decided to begin finding some footage for my video background, relating to the key points stated earlier. I decided to ask Louisa for some video’s of IVY, but the video must fit my design.

And as stated above the video must be a ‘simple video with contrast’ the the page content.

The Video

ivy4

Here is the video that Louisa sent over to me, I believe it represents emotional aspects of the company, this video reflects:

  • Innocence
  • Small and sweet
  • Personal

Also its a short clip, which almost looks like a loop which I believe gives off quite a nice effect, and that also in the video is IVY, she is the centre piece of the company and what the company is based around, so I believe this video is perfect for the website.

Video Background Best Practices

On a website called ‘The New Code’ I discovered that, a video background must be compressed to ideally bellow 5mb, This will make loading times faster. So I decided to load the footage into premier pro, to try and compress the video to a file size bellow 5mb.

mb

As you can see in this screen shot the video has an estimated file size of ’18 MB’ I went onto adjusting some of the properties of the video to lower the file size, and compress the video.

bitrate

I adjusted the bitrate of the video, which in turn lowered the file size, I then rendered the file and checked the footage to see if it ran smoothly and still looked okay which it did, here is a screen shot of the file size now:

mb2

Finished

Now that I had a video that fit the purpose of the website, set to the correct file size it was ready for when I come to implementing it into the website.

Resource: The New Code

 

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