Ist es möglich, ein Youtube-Video abzuspielen, wenn ein bestimmtes CSS ausgewählt wird?

Question

Ich suche nach einer Möglichkeit, verschiedene Youtube-Videos anzuzeigen und abzuspielen, wenn ein bestimmtes CSS aus einem Dropdown-Menü ausgewählt wird. Ich dachte, JavaScript könnte verwendet werden, um nach CSS zu suchen.

Hinzufügen zum HTML-Header der Seite.

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

eg/CSS

red.css
blue.css

Red plays
Blue plays

Vielleicht eine div Datei in den HTML-Code für das Hinzufügen, wo das Video erscheinen würde .

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

#

youtube Code embeding.

alten Einbettungscode:

<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: (möglicherweise der Code wird sie für alle Videos in der Zukunft zu nutzen versuchen)

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

#

Irgendwelche Ideen Wie verbinde ich JavaScript mit dem CSS, damit der andere Youtube angezeigt wird, oder gibt es einen einfacheren Weg?

Answer 1

Werfen Sie einen Blick auf document.styleSheets - es ist ein Array (sortierte Liste) von Stylesheets mit Ihrer Webseite verbunden. Sie können eine Referenz finden Sie hier:

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

Die disabled Eigenschaft gibt an, ob die gegebene Sheet oder nicht angewendet wurde.

So könnten Sie über die Stylesheets iterieren und wenn Sie auf die rote oder blaue kommen, überprüfen Sie, ob sie angewendet werden (nicht deaktiviert).

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 
    } 

Answer 2

im vorausgesetzt ur die mitgelieferte CSS Ändern einer Drop-Down mit .. wenn ja .. dann auf der gleichen ausgewählten Ereignis, auf dem ur den geänderten Wert Lesen und Ändern der CSS-Datei u kann auch die alte Iframe entfernen und fügen Sie eine neue .. das wäre einfach .. sply durch die Verwendung von JQUERY