I'm working on a flash gallery and for this gallery I would like the video to be a certain size. When I first began working on it the flash would only be very small and would not correctly size itself. Late last night I got it working to the correct size but for whatever reason it seems to take up the entire body tag and pushs all other elements into the html element. As an example I have put an h1 tag to show how it does this. I am using swffit and swfobject to get the flash working but I am almost positive that the problem lies with swffit or maybe even my code. I began to make a jsfiddle example of this but its very fiddly with any flash objects I tried to put in it. Any help on this would be much appreciated.
SWFOBJECT: https://github.com/swfobject/swfobject.git
SWFFIT: http://swffit.millermedeiros.com/
HTML AND JAVASCRIPT
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Flash Test</title>
<meta name="description" content="Flash stuff">
<meta name="author" content="SitePoint">
<link rel="stylesheet" href="styles/style.css">
<script src="js/swfobject.js"></script>
<script src="js/swffit.js"></script>
<script type="text/javascript">
var height = window.innerHeight - 160;
var width = window.innerWidth - 140;
if ((height * 1.375) < width) {
width = height * 1.375;
} else {
height = width / 1.375;
}
</script>
<script type="text/javascript">
var flashvars = {},
//params = {wmode:"transparent"},
params = {},
attributes = {};
swfobject.embedSWF("swfs/scoob.swf", "moviefun", width -140, height -160, "9.0.0", "js/swfobject.js", flashvars, params, attributes);
swffit.fit("moviefun", "1", "1", width, height, true, false);
</script>
</head>
<body>
<script type="text/javascript">
window.onresize = doResize;
function doResize() {
height = window.innerHeight - 160;
width = window.innerWidth - 140;
if ((height * 0.7175) < width) {
width = height * 0.7175;
} else {
height = width / 0.7175;
};
swffit.fit("moviefun", "1", "1", width, height, true, false)
}
</script>
<div>
<h1 id="mainText">Hey there</h1>
<div id="moviefun">It didn't work prob bc of internet explorer... if not though can't help ya......</div>
</div>
<script src="scripts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
CSS
body {
background-color: red;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 10px;
}
#moviefun {
position: absolute;
top: 0px;
left: 70px;
background-color: red;
}
#mainText {
background: yellow;
}
THIS IS AN IMAGE OF THE PROBLEM WITH IT BEING SMALL THAN ITS SUPPOSED TO BE AND STILL PUSHING EVERYTHING ELSE INTO THE HTML TAG
Resizing a SWF is best handled by resizing the parent container. See Resize an SWF when loading it with SWFObject
