5

ドロップダウンメニューから特定のCSSが選択されたときに、さまざまなYouTubeビデオを表示して再生する方法を探しています。JavaScript を使用して CSS をチェックできると考えていました。

ページの html ヘッダーに追加します。

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

例/CSS

赤.css 青
.css

赤がプレーする
青がプレーする

おそらくdiv、ビデオが表示される場所の html にファイルを追加します。

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

#

YouTube 埋め込みコード。

古い埋め込みコード:

<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 コード: (おそらく、今後すべての動画で使用しようとしているコード)

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

#

JavaScript を CSS に接続して別の youtube が表示されるようにする方法、またはこれを行う簡単な方法はありますか?

4

2 に答える 2

1

ご覧くださいdocument.styleSheets- これは、Web ページに関連付けられたスタイルシートの配列 (順序付きリスト) です。ここで参照を見つけることができます：

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
    }
于 2012-04-08T22:57:36.330 に答える
0

ドロップダウンを使用して含まれているcssを変更すると仮定しています..はいの場合..次に、変更された値を読み取って.CSSファイルを変更する同じ選択されたイベントで、古いIframeを削除して新しいIframeを追加することもできます..簡単に.. JQUERY を使用して sply

于 2012-04-08T23:00:14.833 に答える