UPDATE! The SWF Object plugin for jQuery has been recently updated to include allowfullscreen! Click here to get it!
I am a big fan of jQuery and when ever I am using JavaScript, it is the first engine I go to. Lately, I have been building a video player that has full screen functionality. Normally, I would use jQuery SWFObject but for some reason I was getting errors when I clicked on the button for the video to go to full screen. A quick inspection of the plugin’s code revealed that full screen functionality hadn’t been included.
It turned out adding ‘allowFullScreen’ to the plugin’s code was easier that I originally anticipated. The plugin uses a object that contains information like the SWF URL, width, height, wmode, flashvars, etc. All I needed to do was add an extra line of code that would grab ‘allowFullScreen’ value and integrate it into the rendered code to display the flash file.
I used the uncompressed plugin JS file to make the adjustments needed to make full screen to work.
Find this section of code in the JS file:
id: obj.id,
name: obj.name,
height: obj.height || 180,
width: obj.width || 320
},
params: {
wmode: obj.wmode || 'opaque',
flashvars: obj.flashvars
}
Insert the following code after wmode:
The new code should look like this:
id: obj.id,
name: obj.name,
height: obj.height || 180,
width: obj.width || 320
},
params: {
wmode: obj.wmode || 'opaque',
allowFullScreen: obj.allowFullScreen || 'false',
flashvars: obj.flashvars
}
Now the plugin will use the allowFullScreen correctly. This is a sample of how to use it:
$("#flashContent").flash(
{
swf:'sample.swf',
width:'800',
height:'600',
wmode: 'window',
allowFullScreen: 'true'
}
);
});
Finally, you will want to compress the revised code. I suggest going over to Google Code and using their Closure tool.
Nice one, thanks for sharing!
Cheers!
Add A Comment