Is it possible to have a youtube video play when a certain CSS is picked?

Question

I'm Looking for a way to have different youtube videos appear and play when a certain CSS is picked, from a drop down menu. I was thinking JavaScript could be used to check for the CSS.

Adding to the html header of the page.

<script type="text/javascript" src="=./javascript/playvid4css.js"></script>

eg/ CSS

red.css
blue.css

Red plays
Blue plays

Maybe adding a div file to the html for where the video would appear.

<div id="yvideo"></div>

#

youtube embeding code.

old embed code:

<object width="420" height="315">
    <param name="movie" value="http://www.youtube.com/v/N9ync7sLSd4?version=3&amp;hl=en_GB&amp;rel=0"></param>
    <param name="allowFullScreen" value="true"></param>
    <param name="allowscriptaccess" value="always"></param>
    <embed src="http://www.youtube.com/v/N9ync7sLSd4?version=3&amp;hl=en_GB&amp;rel=0" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>

youtube iframe code: (possibly the code they will be trying to use for all videos in the future)

<iframe width="420" height="315" src="http://www.youtube.com/embed/N9ync7sLSd4?rel=0" frameborder="0" allowfullscreen></iframe>

#

Any ideas how to connect JavaScript to the CSS so the different youtube would appear, or is there an easier way of doing this?

Answer 1

Have a look at document.styleSheets - it is an array (ordered list) of stylesheets associated with your webpage. You can find a reference here:

https://developer.mozilla.org/en/DOM/stylesheet

The disabled property states whether the given stylesheet has been applied or not.

So, you could iterate over the stylesheets and when you come upon the red or blue, check if they're applied (not disabled).

var i;
for (i = 0; i < document.styleSheets.length; i++)
    if (document.styleSheets[i].href == "myRedStyleSheet.css" && 
        !document.styleSheets[i].disabled) {

            // code for the red stylesheet

    } else if (document.styleSheets[i].href == "myBlueStyleSheet.css" && 
               !document.styleSheets[i].disabled) {

            // code for the blue stylesheet
    }