Question

我正在尝试创建一个页面，我想在其中嵌入5-10个YouTube视频。页面右侧只会显示1个视频，视频标题将保留在左侧。点击标题会使相应的视频显示在右侧div上。我已经尝试过，但不确定这是否是正确的方法。

Youtube视频页面

<style type="text/css">

    body{
        margin: 0px;
    }

    #leftdiv{
        background-color: #A9F5D0;
        float: left;
        height:100%;
        width: 30%;

    }

    #rightdiv{
        background-color: #F8E0F1;
        float: left;
        height: 100%;
        width: 70%;
    }

    #lectname{
        padding:10px;
        font-family: "comic sans ms";
    }


</style>

<div id="container">

    <div id="leftdiv">

        <div id="lectname">
            <p id="lectname1">Lec 01: What is Signal?</p>
            <p id="lectname2">Lec 02: What is an Analog Signal?</p>
            <p id="lectname3">Lec 03: What is Digital Signal?</p>
            <p id="lectname4">Lec 04: Need of Digital Signal</p>
            <p id="lectname5">Lec 05: Introduction to Digital Electronics</p>
            <p id="lectname6">Lec 06: Switch and Bits Intuition</p>
        </div>          

    </div>

    <div id="rightdiv">
        <iframe width="480" height="270" src="https://www.youtube.com/embed/M0mx8S05v60" frameborder="0" allowfullscreen></iframe>
    </div>  

</div>

<script type="text/javascript">

    document.getElementById("lectname1").onclick=function(){
        document.getElementById("rightdiv").innerHTML='<iframe width="480" height="270" src="https://www.youtube.com/embed/M0mx8S05v60" frameborder="0" allowfullscreen></iframe>'
    }

    document.getElementById("lectname2").onclick=function(){
        document.getElementById("rightdiv").innerHTML='<iframe width="480" height="270" src="https://www.youtube.com/embed/F5h3z8p9dPg" frameborder="0" allowfullscreen></iframe>'
    }

    document.getElementById("lectname3").onclick=function(){
        document.getElementById("rightdiv").innerHTML='<iframe width="480" height="270" src="https://www.youtube.com/embed/jRL9ag3riJY" frameborder="0" allowfullscreen></iframe>'
    }

    document.getElementById("lectname4").onclick=function(){
        document.getElementById("rightdiv").innerHTML='<iframe width="480" height="270" src="https://www.youtube.com/embed/izBaDRyqnBk" frameborder="0" allowfullscreen></iframe>'
    }

    document.getElementById("lectname5").onclick=function(){
        document.getElementById("rightdiv").innerHTML='<iframe width="480" height="270" src="https://www.youtube.com/embed/2xXErGeeb_Q" frameborder="0" allowfullscreen></iframe>'
    }

    document.getElementById("lectname6").onclick=function(){
        document.getElementById("rightdiv").innerHTML='<iframe width="480" height="270" src="https://www.youtube.com/embed/RF9I6UzI4Rc" frameborder="0" allowfullscreen></iframe>'
    }

</script>

Answer 1

你的脚本运行正常。我建议更改iFrame的源代码而不是替换div中的html。我还更改了脚本，使其更容易阅读，而不是点击所有这些手册。

＆＃13;

    body{
        margin: 0px;
    }

    #leftdiv{
        background-color: #A9F5D0;
        float: left;
        height:100%;
        width: 30%;

    }

    #rightdiv{
        background-color: #F8E0F1;
        float: left;
        height: 100%;
        width: 70%;
    }

    #lectname{
        padding:10px;
        font-family: "comic sans ms";
    }

＆＃13;

<div id="container">

    <div id="leftdiv">

        <div id="lectname">
            <p class="videoLink" id="lectname1">Lec 01: What is Signal?</p>
            <p class="videoLink" id="lectname2">Lec 02: What is an Analog Signal?</p>
            <p class="videoLink" id="lectname3">Lec 03: What is Digital Signal?</p>
            <p class="videoLink" id="lectname4">Lec 04: Need of Digital Signal</p>
            <p class="videoLink" id="lectname5">Lec 05: Introduction to Digital Electronics</p>
            <p class="videoLink" id="lectname6">Lec 06: Switch and Bits Intuition</p>
        </div>          

    </div>

    <div id="rightdiv">
        <iframe id="videoFrame" width="480" height="270" src="https://www.youtube.com/embed/M0mx8S05v60" frameborder="0" allowfullscreen></iframe>
    </div>  

</div>

<script type="text/javascript">

    var lectureVideos = {
		lectname1: "https://www.youtube.com/embed/M0mx8S05v60",
		lectname2: "https://www.youtube.com/embed/F5h3z8p9dPg",
		lectname3: "https://www.youtube.com/embed/jRL9ag3riJY",
		lectname4: "https://www.youtube.com/embed/izBaDRyqnBk",
		lectname5: "https://www.youtube.com/embed/2xXErGeeb_Q",
		lectname6: "https://www.youtube.com/embed/RF9I6UzI4Rc"
	}
	
	var videoLinks = document.getElementsByClassName("videoLink");
	for(var i=0; i<videoLinks.length; i++){
		videoLinks[i].onclick=function(){
			document.getElementById("videoFrame").src=lectureVideos[this.id];
		}
	}
	
	

</script>

＆＃13;

如何使用JavaScript在点击时显示嵌入的YouTube视频

1 个答案: