Remove css styles coming from embeded YouTube videos

Question

<div id="videos">
   <div id="channel_div" style="display: block;">
      <div style="color: rgb(0, 0, 0); font-family: Arial, Helvetica, sans-serif; font-size: 12px; width: 555px;" class="firstVideo">
      .. trimmed <table here> 

      </div>
      <div style="color: rgb(0, 0, 0); font-family: Arial, Helvetica, sans-serif; font-size: 12px; width: 555px;">
       .. trimmed <table here>
      </div>
   </div>
</div>

I have above snippet and divs inside channel_div is coming from youtube with styles, with width constraints that breaks the UI.

How can i remove these styles with jquery?

I tried what this question suggested as follows:

$('#channel_div div').removeAttr('style');

also tried this:

$('#channel_div > div').removeAttr('style');

but none of these worked. I just want to add my width as 300px.

Could someone please offer guidance on this.

They should be in an iframe and you cannot manipulate them by using JavaScript. — Ram, Dec 19 '12 at 02:54
Yep, @undefined is right.. I was thinking of some issue like you cannot delete the "style" attribute, but in fact you can. So I guess the reason you cannot manipulate that is the html is inside an iframe. — redShadow, Dec 19 '12 at 02:57
@redShadow Actually you can manipulate iframe's contents, but in this case [Same Origin Policy](http://en.wikipedia.org/wiki/Same_origin_policy) prevents it. — Ram, Dec 19 '12 at 03:25

BornKillaz · Accepted Answer · 2012-12-19T04:02:54.457

You cannot do this with iframes from remote domains.

However, you can probably use php and fetch the remote file internally to remove those parameters server side, or even with jquery by loading that fetched file and make it an internal embed.

Also, if it's only a width issue, have you tried to add a CSS rule?

.firstVideo { max-width: 300px !important; }

I'm on my mobile, so I really can't test it right now to be sure.

score 0 · Answer 2 · answered Dec 19 '12 at 03:18

0

I think you CAN manipulate the html is inside an iframe, try this:

$('#iframeID').contents().find('#someID').html();

answered Dec 19 '12 at 03:18

redwind

161
1
13

Yes, you can, but here as the source of the iframe is different you CAN'T. http://en.wikipedia.org/wiki/Same_origin_policy – Ram Dec 19 '12 at 03:26

score 0 · Answer 3 · answered Dec 19 '12 at 04:14

Embedded youtube videos will be in iframes something like this:

   <iframe width="570" height="321" 
           src="http://www.youtube.com/embed/L5ZGU1Qkx8?
           wmode=opaque&showinfo=0&autohide=1" frameborder="0"> 
    </iframe>

So here you can set the height and width using it's own attribute.

Remove css styles coming from embeded YouTube videos

3 Answers3