views:

573

answers:

4

Here's my code.

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"&gt;&lt;/script&gt;
<title></title>
<script>
$(document).ready(function(){
$("#video").html('<object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/HPPj6viIBmU&amp;hl=en_US&amp;fs=1&amp;"&gt;&lt;/param&gt;&lt;param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/HPPj6viIBmU&amp;hl=en_US&amp;fs=1&amp;" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object>');
});
</script>
</head>
<body>
  <div id="video"></div>
</body>
</html>

It works with Firefox and Chrome, but something's not quite right with IE6. Sadly, one of the proyect requirements is supporting this browser, so even if it workis in IE7, I need to work this out.

I know there's SWFObject, but I'd rather not use it (we are loading already a bunch of JS files, we don't want more).

Even this won't work:

  <script>
document.write('<object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/HPPj6viIBmU&amp;hl=en_US&amp;fs=1&amp;"&gt;&lt;/param&gt;&lt;param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/HPPj6viIBmU&amp;hl=en_US&amp;fs=1&amp;" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object>');
  </script>

It seems that IE6 ignores the <object> tag, here's the code it embeds.

<EMBED src=http://www.youtube.com/v/HPPj6viIBmU&amp;amp;hl=en_US&amp;amp;fs=1&amp;amp; width=480 height=385 type=application/x-shockwave-flash allowfullscreen="true" allowscriptaccess="always"></EMBED>

Is there a workaround?

Thanks.

A: 

Beside using SWFObject you will have to manually detect IE and then use

<embed>

Something like this:

var isMSIE = /*@cc_on!@*/false;
if(isMSIE)
{
 //use embed tag
}
else
{
 //use object
}

See: http://kb2.adobe.com/cps/127/tn_12701.html for embed and object properties.

I think the problem with your embed tag is that you cannot place Flash variables inside of it. They must go into flashvars. The link above will clarify how to do this. But the best way to test is to give it the minnimum properties and then add more to see what is breaking it.

A simple embed tag for IE6 looks like this:

<embed src="MyFlashMovie.swf" quality="high" width="320" height="240" name ="MyMovieName" type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer"&gt;
</embed>
Todd Moses
Thanks, could you elaborate? What would the embed code be? I just tried embedding the last code block in my question and it isn't working.
metrobalderas
@metrobalderas That <embed> should be working for IE6. What problems are you having? http://kb2.adobe.com/cps/415/tn_4150.html
bzlm
+8  A: 

The workaround you look for is going to end with you writing the equivilant of swfobject, except it won't be as well tested or perform as well. Why reinvent the wheel when there is a perfectly good existing solution, especially when it is only 10KB minified? if you are deadset on not adding another http request, why not slipstream the swfobject code into the page or into another js file.

I never use anything other than swfobject for embedding flash.

micmcg
+1 for thinking :] Addition to answer: you could even put together all JS files, and thru PHP output it as single gzipped JS file
Adam Kiss
+1  A: 

This is a bit weird, because originally the object tag was inctroduced by MS to embed flash-objects.

Try to add the classid-parameter to your object-tag, eg:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="300" height="120">
    <param name="movie" value="myContent.swf" />    
</object>
henchman
Sorry, it doesn't work.
metrobalderas
A: 

For embed or object tags you sometimes need to use the DOM createElement and insertBefore or appendChild methods instead of simply writing out the html using document.write. When you use the DOM methods it will notify the browser that a new element is being added dynamically and the browser should process it to turn it into a plugin object. See this bookmarklet that I made to resize a Silverlight object and insert it into an existing HTML document.

Greg Bray