Changing <object> height and width works in Chrome but not Firefox or IE. Why?
Posted
by Michael Hopkins
on Stack Overflow
See other posts from Stack Overflow
or by Michael Hopkins
Published on 2010-04-21T04:53:56Z
Indexed on
2010/04/21
5:03 UTC
Read the original article
Hit count: 233
I am making a site with two Youtube videos. These videos use the raw embed code from Youtube. The site's design doesn't work with any of the default Youtube sizes, so I am writing code to automatically resize the video. Here is my code. There will never be more than these two tags on the page, otherwise I'd do a better job selecting the videos.
<script language='JavaScript' type='text/javascript'>
var x=document.getElementsByTagName('object');
x.[0].width='350';
x.[0].height='350';
x.[1].width='350';
x.[1].height='350';
</script>
For reference, here's a sample default Youtube embed that the code might alter:
<object width="480" height="385">
<param name="movie" value="http://www.youtube-nocookie.com/v/zSgiXGELjbc&hl=en_US&fs=1&rel=0"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube-nocookie.com/v/zSgiXGELjbc&hl=en_US&fs=1&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed>
</object>
In Chrome, the video players sit perfectly in a 350x350 box. In IE and FF (latest versions), the videos are the unchanged, normal size. I cannot find anything in Google that explans why this won't work. I have tried using setattribute, for loops, adjusting both and , single-quotes and double-quotes, etc.
Any ideas what is going wrong?
© Stack Overflow or respective owner