Changing <object> height and width works in Chrome but not Firefox or IE. Why?

Question

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&amp;hl=en_US&amp;fs=1&amp;rel=0"&gt;&lt;/param&gt;
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube-nocookie.com/v/zSgiXGELjbc&amp;hl=en_US&amp;fs=1&amp;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?

Answer 1

First, you have to to write x[0] not x.[0]. If that doesn't work, too, i've got two more ideas:

(1)

x[0].width='350px';
x[0].height='350px';
x[1].width='350px';
x[1].height='350px';

(2)

x[0].style.width='350px';
x[0].style.height='350px';
x[1].style.width='350px';
x[1].style.height='350px';

Answer 2

firefox uses the values in the 'embed' not just values the 'object' tag - probably need to replace both to be sure