Click to See Complete Forum and Search --> : how to add .swf and video to html page?


lmth
09-06-2009, 04:39 AM
How to add .swf and video to html page with disabling scrollbars and stretching the .swf and video to the whole page?
I am using these codes for creating projects for sale purposes, I am also asking for permission for using these codes for my projects!
looking 4wrd.

Eye for Video
09-06-2009, 03:47 PM
Well you’ll need to combine some <style> along with properly planning your .swf.
The disabled scrollbar can come from
overflow: hidden;
for your <html>
Stretching the .swf to the whole page comes from using a % of 100 width and/or height for the <body> and <div> holding the Flash content:
height: 100%;
Then depending on how you are placing the .swf on the page, you should also set the width and height params to 100% and the scale param to “scale”.
Something like this (if you are using swfobject to place the Flash content on the page:
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SWFObject embed by Geoff Stearns (full page) @ deconcept</title>
<!-- SWFObject embed by Geoff Stearns geoff@deconcept.com http://blog.deconcept.com/ -->
<script type="text/javascript" src="swfobject.js"></script>
<style type="text/css">

/* hide from ie on mac \*/
html {
height: 100%;
overflow: hidden;
}

#flashcontent {
height: 100%;
}
/* end hide */

body {
height: 100%;
margin: 0;
padding: 0;
background-color: #f60;
}

</style>
</head>
<body>

<div id="flashcontent">
<strong>You need to upgrade your Flash Player</strong>
This is replaced by the Flash content.
Place your alternate content here and users without the Flash plugin or with
Javascript turned off will see this. Content here allows you to leave out <code>noscript</code>
tags. Include a link to <a href="fullpage.html?detectflash=false">bypass the detection</a> if you wish.
</div>

<script type="text/javascript">
// <![CDATA[

var so = new SWFObject("so_tester.swf", "sotester", "100%", "100%", "8", "#FF6600");
so.addVariable("flashVarText", "this is passed in via FlashVars for example only");
so.addParam("scale", "scale");
so.write("flashcontent");

// ]]>
</script>

</body>
</html>
Keep in mind that your .swf will scale while keeping the same aspect ratio. So as the .swf gets wider, it will also get proportionately taller (unlike most text content). So there may still be some un-used space on the edges or bottom of the monitor screen. And if you disable the scrollbars, you could have a part of the .swf that you cannot get to, if you stretch to 100% width for example and not 100% height.
Also, any bitmaps used to create the .swf may be stretched out past their native resolution and could become pixilated at wider screen resolutions. So plan and test at various widths before finishing the entire project.
Best wishes,
EfV

TinKim
09-07-2009, 07:53 AM
Google for "swfObject". For videos there is a really good component by Jerome Wijering called "JW Player".

ksvinoth
09-07-2009, 01:02 PM
xx