Full page flash video background

One of my favourite clients — Crush Creative — recently asked me if I could add a full page video background to a website.

Obviously, it was going to have to be built in Flash due to the lack of support for the <video> tag in IE.

But I hate working in Flash. Don't get me wrong: I don't hate Flash itself, it's just that I hate the pointy-clicky-where-the-hell-should-I-put-the-code stuff. I guess that if I put my mind to it I could learn the Flash authoring environment, but it just doesn't really suit my development style, and I don't even have a licence for Flash and my evaluation period has expired.

But I do have access to haXe, which is a programming environment which lets you write code to target the Flash Player plugin. And it's a 'proper' programming environment: you type in text and compile it. Lovely.

So I knocked up a proof-of-concept background flash video player in haXe, and it turned out to be remarkably simple.

Here's the code:

import flash.Lib;
import flash.display.Stage;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.media.Video;
import flash.net.NetConnection;
import flash.net.NetStream;
import flash.events.Event;
import flash.events.NetStatusEvent;
import flash.display.LoaderInfo;

class Vid {
    private var mc : flash.display.MovieClip;
    private var myVideo : Video;
    private static var stage : Stage;
    private static var myNetStream : NetStream;

    // flashvars
    private static var movieUrl : String;
    private static var movieWidth : Int;
    private static var movieHeight : Int;
    private static var bufferTime : Int;
    public function new(){
        mc  = flash.Lib.current;
	stage = mc.stage;

        // get flashvars describing movie we're going to play
    	movieUrl = mc.loaderInfo.parameters.movieUrl;
    	movieWidth = Std.parseInt(mc.loaderInfo.parameters.movieWidth);
    	movieHeight = Std.parseInt(mc.loaderInfo.parameters.movieHeight);
        bufferTime = Std.parseInt(mc.loaderInfo.parameters.bufferTime);
	// set up the stage
        stage.align = StageAlign.TOP_LEFT;
	stage.scaleMode = StageScaleMode.NO_SCALE;
	myVideo = new Video();
	myVideo.smoothing = true;

        var myNetConnect : NetConnection = new NetConnection();

        myNetStream = new NetStream(myNetConnect);
        myNetStream.bufferTime = bufferTime;
        myNetStream.addEventListener(NetStatusEvent.NET_STATUS, checkNetstreamEvent);
        stage.addEventListener(Event.RESIZE, ResizeAndPosition);

	function checkNetstreamEvent(e:NetStatusEvent) {
                // if we've got to the end of the video, rewind it (ie, loop the video)
		if (e.info.code == "NetStream.Play.Stop") {

	function ResizeAndPosition(e:Event) {	
	        // resize and position the video to fill the stage without distortion
		var stageAspectRatio = stage.stageWidth / stage.stageHeight;
		var videoAspectRatio = movieWidth / movieHeight;

		if (stageAspectRatio > videoAspectRatio) {
			// stage wider than video
			myVideo.width = stage.stageWidth;
			myVideo.height = (myVideo.width / videoAspectRatio);
			// so we need to crop some height
			myVideo.y = -((myVideo.height - stage.stageHeight)/2);
			myVideo.x = 0;
		} else {
			// stager taller than video (or same)
			myVideo.height = stage.stageHeight;
			myVideo.width = (myVideo.height * videoAspectRatio);
			// so we need to crop some width
			myVideo.x = -((myVideo.width - stage.stageWidth)/2);
			myVideo.y = 0;

    public static function main()
		new Vid();


When you embed the Flash movie, you need to pass the movie url and dimensions in the flashVars, something like this:

<script type='text/javascript' src='http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js'></script>
<style type="text/css">body {
	margin: 0;
	padding; 0;
	background-color: #ddddd;

#background {
	width: 100%;
	height: 100%;
	z-index: 1;
<script type='text/javascript'>
$(document).ready(function() {
	flashembed('background', {src: 'vid.swf', wmode: 'transparent'}, {
		movieUrl: 'ink.flv', // url to movie
		movieWidth: '640', 
		movieHeight: '480',
		bufferTime: '10', // secs of video to buffer before starting to play
		wmode: 'transparent' // need to set wmode to allow you to float html over the top
<div id="background">&nbsp;</div>

Note that you won't be able to float HTML over the Flash movie on Android due to a limitation in the Android Flash Player plugin:

"Flash Content is always displayed on top of all HTML content"
  • December 12, 2010
comments powered by Disqus
Back to Top