Changing the height and width of the <object> works in Chrome, but not in Firefox or IE. What for?

I am making a website with two Youtube videos. These videos use the raw paste code from Youtube. The site design does not 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 of these two tags on this page, otherwise I would rather make a video selection.

<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 is the default example Youtube inserts that the code may change:

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

Chrome 350350. IE FF ( ) . - Google, , . setattribute, , , ..

, ?

+3
3

firefox "embed", "object" - , ,

+2

-, x[0] not x.[0]. , :

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

That x[0].style.width.

width, height, display, etc. - all properties of the object style.

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

Also note that both your object and your embedded content have built-in parameters, and they can override your JS, depending on the browser / version.

0
source

Source: https://habr.com/ru/post/1742064/


All Articles