Geek Answers Handbook

Insert YouTube video using jQuery in IE6 without SWFObject

Here is 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> </html>

It works with Firefox and Chrome, but something is not entirely true in IE6. Unfortunately, one of the project requirements supports this browser, so even if it works in IE7, I need to do this.

I know SWFObject there, but I would prefer not to use it (we are already loading a bunch of JS files, we no longer need it).

Even this will not 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>

IE6 seems to be ignoring the <object> , here is the code that it inserts.

 <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 any workaround?

Thanks.

+6
javascript jquery flash internet-explorer-6 video
source share
4 answers

The workaround you are looking for ends up writing equivilant swfobject, except that it will not be so well tested or executed. Why reinvent the wheel when there is a perfectly good existing solution, especially when it is only 10KB? if you are not configured to add another HTTP request, why not merge the swfobject code into a page or another js file.

I never use anything other than swfobject to embed flash.

+10
source share

This is a bit strange, because initially the object tag was implemented by MS to embed flash objects.

Try adding the classid parameter to your object tag, for example:

 <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="300" height="120"> <param name="movie" value="myContent.swf" /> </object>
+1
source share

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

 <embed>

Something like that:

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

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

I think the problem with your embed tag is that you cannot put Flash variables inside it. They must enter flashvars. The link above will explain how to do this. But the best way to check is to give it minimal properties, and then add more to see what violates it.

A simple embed tag for IE6 is as follows:

 <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>
0
source share

For inline or object tags, you sometimes need to use the DOM createElement and insertBefore or appendChild methods instead of simply writing out 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 must process it in order to turn it into a plugin object. See the bookmarkmark I did to resize the Silverlight object and paste it into an existing HTML document.

0
source share

More articles:


All Articles