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.

Answer 1

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.