Javascript - apply a class to iframe with two different type of sources

Question

How can I target more than element in a single jQuery selector?

I am trying do add a class to all my soundcloud and youtube widget when a page is loaded. I have no problem doing it for soundcloud, with this :

 $("iframe[src^='https://w.soundcloud.com/']").addClass("widget");

I would like to apply this class to a youtube iframe as well. How can I select both iframes? I tried with :

$("iframe[src^='https://w.soundcloud.com/' or src^='http://www.youtube.com']").addClass("widget");

That, as well as other of my attempts, do not work...

Thanks in advance for any help !

Answer 1

CSS selectors use , for 'or' which is known as grouping in CSS.

$("iframe[src^='https://w.soundcloud.com/'], iframe[src^='http://www.youtube.com']").addClass("widget");

Source: W3C "Grouping"

Answer 2

Selector syntax oesn't support or. The way of alternating two selectors is ,:

$("iframe[src^='https://w.soundcloud.com/'], iframe['src^='http://www.youtube.com']").addClass("widget");