Easily embed Flash movies and make them viewable fullscreen with jQuery and SWFobject

I wrote a little jQuery script that makes embedding flash movies very easy and makes them go fullscreen when you click a link. I used jQuery swfobject to load in the movies and jQuery to make it go fullscreen. I import the flash videos in a div and set the div’s width and height to 100%. This flash div is outside of a container div. When I make the flash div go fullscreen, I set the display of the container div to none. You can download the demo files below.

Supported browsers: 
Internet Explorer 5.5/6.0/7.0/8.0
FireFox 1.5/2.0
Safari 2.0
Opera 9.0

Usage:

The HTML:

I made a link with a class “fullscreen” and in the rel attribute I added the path to the flash SWF movie. When I click this link it will load in the flash movie and set its dimension to the dimensions of your browser.

	<div id='flashvid' style="overflow:hidden"></div>

	<div id="container" class="clearfix">
		<p class="fullscreen" id="test.swf" rel="test.swf"><a href="#">Go Fullscreen</a></p>
	</div>

The jQuery/Javascript:

// CLOSE FLASH WINDOW
function close_flash(){
$('#container').show();
	$('#flashvid').animate({ 
        	width: "0%",
			height: "0%"
     }, 300).html("");
}
	
	
$(document).ready(function(){
	//counts the amount of fullscreen links on page
	var arr=new Array();	
	var count = $('.fullscreen').size();
	for (i=0;i<count;i++){
		arr.push(i)
	}
		
	// DISPLAY FLASHVIDEO
	$.each(arr, function() {			// loops through all elements with a .fullscreen class			
		 $('.fullscreen').click(function() {					 
		 	var filename= $(this).attr('rel'); //Gets swf filename from rel attribute
		 	
		 	$('#container').hide();	// hide container div with content	 	
		 	
		 	$('#flashvid').css('position', "fixed");		 	 
		 	 
		 	$('#flashvid').animate({ 
		        'width': '100%',
		        'height': '100%'			        
		     }, 600); //set flashvid div height 
	      	
	      	
	      	// loads in the flashmovie and sets its dimensions			 				 	
			 	$('#flashvid').flash({  
			  swf: filename,
			  width: "100%",
			  height: "90%", // set to 100% to make it fullscreen. Is set to 90% now to be able to view the close link.
			  params: {  
			 	 wmode: "opaque"  
			  }  
			}).append("<a href='#' onClick='close_flash()'>close</a>");// this adds a close button after the flash video. You can remove this	
	      
		});
	});   			
});

 

Download the demo files

Comments

Leave a comment

Name

Email (will not be made public)

Comment