CODEWITHSUNDEEP
jqueryhtmlcssyoutube
DarthVader
DarthVader

Reputation: 55032

Remove css styles coming from embeded YouTube videos

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

Upvotes: 6

Views: 1801

Answers (3)

Kalpesh Patel
Kalpesh Patel

Reputation: 2822

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.

Upvotes: 0

BornKillaz
BornKillaz

Reputation: 602

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.

Upvotes: 2

redwind
redwind

Reputation: 161

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

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

Upvotes: 0

Related Questions