Easel: HTML5 Video

On our landing page we decided to try something different than a simple pattern background. Now that our functionality was sorted we decided to add some flare.

We thought an HTML5 video background would be pretty cool. We went to the beach and recored a rather artsy video of the waves and some birds. The next step was to create the background. Using the <Video> tags in HTML5 we could insert the video into the website. Adding autoplay, loop and muted to the code allowed it to loop continuously. We had trouble making it full screen, but we fixed this but inserting it into div with a height and width of 100% and fixing it then setting the video attribute in CSS to “cover” it would make it full screen.

Sea Video Background
Sea Video Background
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