选择某个CSS时，是否可以播放YouTube视频？

Posted 2021-04-26

我正在寻找一种方法，可以从下拉菜单中选择某个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文件，用于显示视频的位置。

<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，或者有更简单的方法吗？

答案

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

另一答案

我假设您使用下拉列表更改包含的CSS ...如果是..然后在同一个选定的事件上，您读取更改的值并更改.CSS文件您也可以删除旧的iframe并添加一个新的...通过使用JQUERY轻松实现