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: 210

Filed under:
|
|
|
|

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

Related posts about JavaScript

Related posts about dom