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 `div`s 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](https://stackoverflow.com/questions/1229688/how-can-i-erase-all-inline-styles-with-javascript-and-leave-only-the-styles-spec) 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.

Answer: 
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.
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.