Embed YouTube video with jQuery in IE6 without SWFObject_问答_开发者

Here's my code:

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

It works with Firefox and Chrome, but something's not quite right in IE6. Sadly, one of the project 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&hl=en_US&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/HPPj6viIBmU&hl=en_US&fs=1&" 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;hl=en_US&amp;fs=1&amp; width=480 height=385 type=application/x-shockwave-flash allowfullscreen="true" allowscriptaccess="always"></EMBED>

Is there a workaround?

Thanks.

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.

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>

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">
</embed>

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.