20140428 using a movie as a web page background - plembo/onemoretech GitHub Wiki
title: Using a movie as a web page background
link: https://onemoretech.wordpress.com/2014/04/28/using-a-movie-as-a-web-page-background/
author: phil2nc
description:
post_id: 7457
created: 2014/04/28 19:49:48
created_gmt: 2014/04/28 23:49:48
comment_status: closed
post_name: using-a-movie-as-a-web-page-background
status: publish
post_type: post
Using a movie as a web page background
I implemented this on a web page at home after seeing the technique being used over on paypal.com (or at least something like it). The project eventually led to a rewrite of that page as well as some 8 or 9 year-old css. The movie in this case was downloaded from Beachfront B-Roll, a very nice source of royalty-free video. This is really an HTML5-centric solution, so if you need to support obsolete browsers that can't do HTML5, look elsewhere (see this HTML5 test page for more about that). In my house we've upgraded everything to have at least one HTML5 compliant browser (Firefox and Chrome on the Linux and Windows machines, Firefox for Android on the v2.3+ smartphones). First, the key code to embed in the web page: [code language="html" gutter="false"] [/code] Both an .mp4 and .webm file are sourced here, the former for compatibility with Internet Explorer 10+. The .webm version of the original .mp4 file was created using ffmpeg:
ffmpeg -i FallBranch.mp4 FallBranch.webm
The companion css looks like this: [code language="html" gutter="false"] #videoBackground { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: url(/images/newhouse.jpg) no-repeat; background-size: cover; } @media (min-aspect-ratio: 16/9) { #videoBackground { height: 300%; top: -100%; } } @media (max-aspect-ratio: 16/9) { #videoBackground { width: 300%; left: -100%; } } [/code] I found a lot of good advice in Full page video background with HTML and CSS, an article by French web developer and photographer Florent Verscheld. My final css borrows heavily from his work. While rewriting my css, I decided to implement a simple div framework for the page. This final result was something like this: [code language="html" gutter="false"]