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