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>
</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&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.