CSS Flash video background?

[stevey500]

I've searched, maybe not correctly. I never find exactly what I'm looking for, and I'm no flash genius but wish to be!

I'm making a website for my photography and video, I want to put a video in the background of the website, is there a CSS code for applying .flv video as my fixed background ? If anyone can help me with that I would I appreciate a lot. I seen toyota's scion website and just felt "gosh, i really want to do that"..

 

[angelwatt]

You can't apply it as a true CSS background, by which I mean the background property. You can give the effect though using layers, which is controlled via the z-index property. The only thing I'm unsure of is if other HTML content will be visible when placed over a Flash object. It also may only work in some browsers while not others. You can give it a go though.

The essential steps will be that the flash object will be positioned absolutely and given a z-index of 0. Then the content over it will be given a z-index of 1 or greater. Depending on everything happening on the page you'll likely have to mess with other CSS properties, but this is the basis.

 

[snickelfritz]

The entire site is built using a Flash liquid GUI.
Scaling while preserving aspect ratio is the tricky part.
width property is used to set the video to the width of the browser window, along with a variable to set the height property.

The following AS3 code centers the video vertically and horizontally in the browser window, and scales it to fit the width of the window.
Keep the rest of the site construction simple:
no large gradients, alpha transparency, or anti-alised fonts. (use pixel fonts)

import flash.display.StageScaleMode;
import flash.display.StageAlign;
import flash.events.Event;

stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
stage.addEventListener(Event.RESIZE, resizeHandler);

function resizeHandler(event:Event=null):void
{
	var sw:Number = stage.stageWidth;
	var sh:Number = stage.stageHeight;
	var _yScale:Number = stage.stageWidth/video.width;

	video.x = 0;
	video.y = (sh * 5) - (video.height * .5);
	video.width = sw;
	video.height = video.height * _yScale;
	
}

resizeHandler(null);

 

[snickelfritz]

BTW, use a custom AS3 video object, rather than a Flash component video player.
Here's the complete code including the actionscript video player:
Here's the result:http://www.byrographics.com/AS3/fullwidthVideo/index.html

import flash.display.StageScaleMode;
import flash.display.StageAlign;
import flash.events.Event;

stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
stage.addEventListener(Event.RESIZE, resizeHandler);

var vid:Video = new Video(360, 240);
vid_mc.addChild(vid);

var nc:NetConnection = new NetConnection();
nc.connect(null);

var ns:NetStream = new NetStream(nc);
ns.addEventListener(NetStatusEvent.NET_STATUS, onStatusEvent);

function onStatusEvent(stat:Object):void
{
	trace(stat.info.code);
}

var meta:Object = new Object();
meta.onMetaData = function(meta:Object)
{
    trace(meta.duration);
};

ns.client = meta;

vid.attachNetStream(ns);
ns.play("paul_forms.flv");

function resizeHandler(event:Event=null):void
{
	var sw:Number = stage.stageWidth;
	var sh:Number = stage.stageHeight;
	var _yScale:Number = stage.stageWidth/vid_mc.width;

	vid_mc.x = 0;
	vid_mc.y = 0;//adjust this set the vertical center of the video.
	vid_mc.width = sw;
	vid_mc.height = vid_mc.height * _yScale;
	
}
resizeHandler(null);

 

[grendal121]

How would l loop this flv with this code

Love this but was wondering how to loop the flv?

BTW, use a custom AS3 video object, rather than a Flash component video player.
Here's the complete code including the actionscript video player:
Here's the result:http://www.byrographics.com/AS3/fullwidthVideo/index.html

import flash.display.StageScaleMode;
import flash.display.StageAlign;
import flash.events.Event;

stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
stage.addEventListener(Event.RESIZE, resizeHandler);

var vid:Video = new Video(360, 240);
vid_mc.addChild(vid);

var nc:NetConnection = new NetConnection();
nc.connect(null);

var ns:NetStream = new NetStream(nc);
ns.addEventListener(NetStatusEvent.NET_STATUS, onStatusEvent);

function onStatusEvent(stat:Object):void
{
	trace(stat.info.code);
}

var meta:Object = new Object();
meta.onMetaData = function(meta:Object)
{
    trace(meta.duration);
};

ns.client = meta;

vid.attachNetStream(ns);
ns.play("paul_forms.flv");

function resizeHandler(event:Event=null):void
{
	var sw:Number = stage.stageWidth;
	var sh:Number = stage.stageHeight;
	var _yScale:Number = stage.stageWidth/vid_mc.width;

	vid_mc.x = 0;
	vid_mc.y = 0;//adjust this set the vertical center of the video.
	vid_mc.width = sw;
	vid_mc.height = vid_mc.height * _yScale;
	
}
resizeHandler(null);

 

[dannyabel]

Hi snickelfritz --- i know you posted this awhile ago, but i just unearthed it and am trying desperately to get it to work.

I have never used a custom netstream video player before, so I am running into problems on two separate fronts.

First, when I just use the code you provide for the video player it plays the first moment of the audio of the flv file over and over again and displays the following output in repeating fashion:

NetStream.Play.Start
NetStream.Play.Start
140.473
140.473
NetStream.Play.Start
140.473
NetStream.Play.Start
140.473
NetStream.Play.Start
140.473
NetStream.Play.Start
140.473
NetStream.Buffer.Empty
NetStream.Buffer.Full
NetStream.Play.Start
140.473

When I paste the second half of the code into the actions panel I receive an error saying that vid_mc is an undefined property. Am I supposed to create a new movie symbol and give it an instance name of vid_mc and then embed the first piece of code within this movie?

If you could give me any guidance on either of these two issues it would be greatly appreciated. There is probably a very simple answer for both things --- I'm sorry in advance if my questions are completely idiotic.

Cheers!

BTW, use a custom AS3 video object, rather than a Flash component video player.
Here's the complete code including the actionscript video player:
Here's the result:http://www.byrographics.com/AS3/fullwidthVideo/index.html

import flash.display.StageScaleMode;
import flash.display.StageAlign;
import flash.events.Event;

stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
stage.addEventListener(Event.RESIZE, resizeHandler);

var vid:Video = new Video(360, 240);
vid_mc.addChild(vid);

var nc:NetConnection = new NetConnection();
nc.connect(null);

var ns:NetStream = new NetStream(nc);
ns.addEventListener(NetStatusEvent.NET_STATUS, onStatusEvent);

function onStatusEvent(stat:Object):void
{
	trace(stat.info.code);
}

var meta:Object = new Object();
meta.onMetaData = function(meta:Object)
{
    trace(meta.duration);
};

ns.client = meta;

vid.attachNetStream(ns);
ns.play("paul_forms.flv");

function resizeHandler(event:Event=null):void
{
	var sw:Number = stage.stageWidth;
	var sh:Number = stage.stageHeight;
	var _yScale:Number = stage.stageWidth/vid_mc.width;

	vid_mc.x = 0;
	vid_mc.y = 0;//adjust this set the vertical center of the video.
	vid_mc.width = sw;
	vid_mc.height = vid_mc.height * _yScale;
	
}
resizeHandler(null);

 

[snickelfritz]

vid_mc is the instance name of a MovieClip on the stage, IIRC.
You can instantiate the movieclip dynamically in your code like this, immediately prior to instantiating vid:

var vid_mc:MovieClip = new MovieClip();
addChild(vid_mc);

var vid:Video = new Video(360, 240); 
vid_mc.addChild(vid);