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

问题

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?

回答1:

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

回答2:

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';

回答3:

It's x[0].style.width.

width, height, display, etc.are all properties of the object's style.

And I write x[0].style.width = 350 + px

Also notice that both your object and your embed have inline-specified dimensions, and those might override your JS, depending on the browser/version.

来源：https://stackoverflow.com/questions/2680409/changing-object-height-and-width-works-in-chrome-but-not-firefox-or-ie-why

标签

javascript