Full screen video background for a WordPress blog

This is the implementation of  full screen video background available at ActiveDen.net
You can go to product page by clicking the banner below:
Link to the full screen flash video background.
Integration of this product with the WordPress platform is very simple.
You are looking at the WordPress version 3 ( the process is the same for version 2).
This is the default theme that comes with the WordPress installation.
Flash file will appear as the video background for this blog.  Also, with this approach you can
use any swf file as the video background.
Step one:
After purchasing full screen video background item from ActiveDen marketplace, in the download package you will find these files:
  • preview.swf
  • swfobject.js
  • video_playlist.xml
  • folder that contains the videos.

Put your these files in the root directory of your wordpress instalation.

Step two:
  • look in the folder that contains your theme (usually wp-content -> wp-themes ->your teme);
  • find styles.css file
  • find the “wrapper” id
  • and add this line of code:

  • add new id to the styles.css : myContent (this will be the div that will hold the swf file)

    • custom css code for the wordpress video content background

Step three:
find header.php file  (usually wp-content -> wp-themes ->your teme);
and inside the “head” tag insert these lines of code:
		<script type="text/javascript" src="swfobject.js"></script>
		<script type="text/javascript">
			var flashvars = {};
			var params = {};
			params.scale = "noscale";
			params.salign = "tl";
			params.bgcolor = "#000000";
			params.allowfullscreen = "true";
			params.wmode = "transparent";
			var attributes = {};
		swfobject.embedSWF("preview.swf", "myContent", "100%", "100%", "9.0.0",false,flashvars, params, attributes);
		</script>
Note that your .swf file in this case is named preview.swf (and it sits in the root of the wordpress instalation)
Step four:
Inside header.php file find this line of code:
body <?php body_class(); ?>>
and on the next line insert this line of code.
<div id="myContent">
 <div id="myAlternativeContent">
 <h1>Alternative content</h1>
 <p>Full screen video background ActionScript 3 version</p>
 <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
 </div>
 </div>

And that’s it!

Now you are able to have video background for a WordPress blog.

You can also use any swf file as the background for your blog.

Note:

There is also ActionScript 2 version of the full screen video background.

But I would recommend getting the ActionScript 3 version because it is several times faster.

Here is the link for the modified header.php and style.css files (these only work on the default WordPress theme: Twenty Ten 1.1).

Comments are closed.