Using Javascript to add class to YouTube iframe element

Question

I'm working on a site with a fairly large number of articles. Quite a few have one or more YouTube videos embedded in them via the YT embed code.

Because the design has changed, the height and width of previously embedded videos is no longer in line with the new design. I therefore target the iframe with CSS to show up in the correct dimensions. This works fine, but there are also other iframe objects (Soundcloud player for instance) that inadvertently get resized. Since the YT or SC embed codes don't have classes, I can't target one kind of embed code, and leave the other untouched.

Is it possible to use js to add a class to only YouTube iframe elements, but leave other iframe elements as they are?

Answer 1

You can do this easily by using an attribute selector:

$("iframe[src^='http://www.youtube.com']​​​​​​​​​​​​​​​​").addClass("myClass");

Here's a working fiddle to demonstrate.

Additional Info

Take a look at jQuery's attribute selector reference. Here's a quick rundown:

=  is exactly equal
!= is not equal
^= starts with
$= ends with
*= contains

Answer 2

Perhaps you could use an attribute selector, like this:

iframe[src^="http://www.youtube"]