This lead to learning more about embedding flash in html than I really cared to know, but I came out on the other side with much leaner code which validates. A big thanks to The List Apart blog for trimming the fat from my embedding code.
The first part of my journey, was figuring out that it is fairly simple to have flash objects automatically resize themselves. All one has to do is set the width and height attributes of the object and/or embed tags to percentages. This works great, especially for Chrome (and I'm assuming other webkit based browsers, and IE [in quirks mode]), however does not work so great for Firefox. If the tag, lets say a <div> that contains the <object>/<embed> tag, has it's width and height attributes set automatically, and it contains only the flash object whose height and width attributes are set with percentages, then its height and width values will be zero—effectively making the flash object invisible.
Once I realized that I couldn't see my flash object in Firefox when it's width and height values were percentages, I knew it was time for a little help from ECMAscript (known as Javascript to its friends). I would have to hook a ride on the window.resize event and set the flash container's height or width to a non-percentage value. So without further ado, I give you my coded solution:
Put the following javascript in between script tags in the header of your web page, or place in a separate file and link to it.
function initFlashResize () {
/* add resizeFlash function to the window.resize event and set the initial
* width of the flash object.
*/
var addEvent = false;
// the most common method to attach an event to all browsers
if (window.addEventListener){
window.addEventListener('resize', function(){resizeFlash()}, false);
addEvent = true;
} else if (window.attachEvent){
// Attaching event to IE browsers pre version 8
window.attachEvent('onresize', function(){resizeFlash()});
addEvent = true;
}
if (addEvent=true) {
var container = document.getElementById('flash_obj');
container.style.height = "100%";
container.style.width = "100%";
container = document.getElementById('flash_screen');
container.style.width = "auto";
resizeFlash();
}
}
function resizeFlash() {
/* Find the width of a parent node to the div holding the flash object,
* and use this value, modified by the desired viewing ratio, to set the
* containing div's height attribute.
*/
var parentalNode = document.getElementById('flash_screen').parentNode;
while (parentalNode.offsetWidth == 0) {
parentalNode = parentalNode.parentNode;
}
var divWidth = parentalNode.offsetWidth;
document.getElementById('flash_screen').style.height = ((divWidth * 0.66) + 'px');
}In your html page:
<body onload="initResizeFlash()">
<div id="flash_screen"><object id="flash_obj" type="application/x-shockwave-flash"
data="movie.swf" width="100%" height="100%">
<param name="movie" value="movie.swf" />
</object></div>
Example page
No comments:
Post a Comment