Page 1 of 1

Can CSS Override an Object Video code width?

Posted: Tue Aug 02, 2011 11:35 am
by simonmlewis

Code: Select all

<object width="425" height="344">
This comes before the embed code from YouTube.

Can CSS overide the width??

Re: Can CSS Override an Object Video code width?

Posted: Tue Aug 02, 2011 12:46 pm
by McInfo
CSS can override the dimensions of the <embed>, but not the <object>.

Re: Can CSS Override an Object Video code width?

Posted: Tue Aug 02, 2011 1:42 pm
by simonmlewis
So if the OBJECT is outside of the Embed, I won't be able to override....

Re: Can CSS Override an Object Video code width?

Posted: Tue Aug 02, 2011 2:19 pm
by McInfo
If the <embed> is not between <object> and </object> tags, the code probably is not the code generated by YouTube.

Re: Can CSS Override an Object Video code width?

Posted: Tue Aug 02, 2011 4:15 pm
by simonmlewis
It is generated by youTube. The <object> tags are on the outter part of the "embed code" they supply. And as such, I cannot over ride the size of the video shown. I need to be able to, so that on a mobile site I can reduce the width, without having two video embed fields in the DB. Just controlling it via CSS.

Re: Can CSS Override an Object Video code width?

Posted: Tue Aug 02, 2011 6:06 pm
by McInfo
Maybe it's different in a mobile browser, but in Firefox, applying CSS to the <embed> tag resizes the video regardless of the size of the <object> element.

Re: Can CSS Override an Object Video code width?

Posted: Wed Aug 03, 2011 2:30 am
by simonmlewis
How do you do that?

Re: Can CSS Override an Object Video code width?

Posted: Wed Aug 03, 2011 9:12 am
by McInfo
Suppose you insert the <object> snippet from YouTube into a <div> which has id="container". Then the stylesheet could contain

Code: Select all

#container embed {
    width: 300px;
    height: 240px;
}
Then an <embed> which has an ancestor with id="container" will have the given dimensions.

A more efficient CSS selector could be

Code: Select all

div#container > object > embed
In this case, <embed> must be a direct descendent of <object>, and <object> must be a direct descendent of <div id="container">.