특정 CSS를 선택했을 때 YouTube 비디오를 재생할 수 있습니까?

Question

드롭 다운 메뉴에서 특정 CSS를 선택하면 다른 YouTube 비디오가 나타나고 재생되는 방법을 찾고 있습니다. JavaScript가 CSS를 확인하는 데 사용될 수 있다고 생각했습니다.

페이지의 html 헤더에 추가.

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

예를 들어/CSS

red.css
blue.css

Red plays
Blue plays

어쩌면 비디오가 나타나는 곳의 HTML에 div 파일을 추가 . 코드를 embeding

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

#

유튜브.

된 소스 코드 :

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

유튜브은 iframe 코드 :

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

#

모든 아이디어 (그들은 미래의 모든 동영상을 사용하려고합니다 가능한 코드) JavaScript를 CSS에 연결하여 다른 YouTube가 나타나게하는 방법, 또는 이것을 수행하는 더 쉬운 방법이 있습니까?

Answer 1

document.styleSheets - 웹 페이지와 관련된 스타일 시트의 배열 (정렬 된 목록)입니다. 여기에 대한 참조를 찾을 수 있습니다

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

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 
    } 

Answer 2

IM .. UR은 드롭을 사용하여 포함 CSS 변경 가정 그렇다면 .. 다음 이전 Iframe에를 UR 변경된 값을 읽고 U 삭제 또한 .css 파일을 수 변경하는 동일한 선택된 이벤트에 및 새로운 것을 추가하십시오 .. JQUERY를 사용하여 sply하십시오.