HTML/CSS/JS: 如果我在边栏上列出了几个 mp4 视频，如何创建一个网页，点击后视频会在页面的主要部分打开？
HTML/CSS/JS: If I list several mp4 videos on a sidebar, how could I create a webpage where the video opens in the main part of the page when clicked?
我正在尝试创建一个类似于 Udemy 或 Khan Academy 中的模块的页面。
我收集了大约 20 个我想开始的视频。
我查看了 Udemy 和可汗学院的代码，似乎列出模块不同课程的侧边栏只是一个带有锚标记的无序列表。
但是当我点击它们时，我不知道如何在页面的主要部分播放这些视频。
我还应该注意，我正在尝试仅使用 HTML 和 CSS 来执行此操作，因为我对 JS 还是很陌生。
任何帮助或指点将不胜感激！
仅使用 HTML/CSS 无法做到这一点（除了完全过时的框架集概念）。您需要的是一个脚本（Javascript/jQuery 或类似脚本），它在单击时将所需的 video/s 加载到主要部分，changing/updating 该部分的 HTML 代码。要获得更详细的描述，您必须 post 您页面的确切 HTML 代码。
谢谢@Johannes 和@VC.One。我实际上通过使用 jQuery.
弄清楚了我想要做什么
第 1 步 - 我创建了一个 HTML 文件，其中包含一个容器 div、一行 div 和两列 div。
第 2 步 - 第一列 div 是我的视频播放的主要部分。我在视频中嵌入了一个 iframe，其来源是 url。
第 3 步 - 我使用第二列创建了一个无序列表 ul，我列出了 7 个列表项 li。然后我给每个li一个id。
第 4 步 - 我使用 CSS 通过将光标更改为鼠标悬停时的指针来使每个
可点击 例如：li:hover {cursor:pointer}
第 5 步 - 最后，我使用 jQuery 更改了 iframe 的源属性，每当我点击一个 li 时。
$("#video1").click(function() {
$("iframe").attr("src", "https://www.youtube.com/embed/JSDuy7v73wI");
});
$("#video2").click(function() {
$("iframe").attr("src", "https://www.youtube.com/embed/DxREm3s1scA");
});
$("#video3").click(function() {
$("iframe").attr("src", "https://www.youtube.com/embed/6JipQNWuYnA");
});
$("#video4").click(function() {
$("iframe").attr("src", "https://www.youtube.com/embed/w_DKWlrA24k");
});
$("#video5").click(function() {
$("iframe").attr("src", "https://www.youtube.com/embed/zmBWPLShmXI");
});
$("#video6").click(function() {
$("iframe").attr("src", "https://www.youtube.com/embed/KoHG6kKxJas");
});
$("#video7").click(function() {
$("iframe").attr("src", "https://www.youtube.com/embed/OT8w4dx_N8U");
});
$("#video8").click(function() {
$("iframe").attr("src", "https://www.youtube.com/embed/r4xp1nq_suc");
});
.box2 {
background-color: #f7f9fa;
border: 1px solid black;
padding-right: 0;
padding-left: 0;
}
.video-table {
list-style-type: none;
padding: 0;
text-align: left;
}
.video-lessons {
border: 1px solid white;
color: black;
font-size: large;
padding: 5%;
width: 100%;
height: auto;
}
.video-lessons:hover {
cursor: pointer;
background-color:#d1d7dc;
}
.iframe-container {
position: relative;
width: 100%;
overflow: hidden;
padding-top: 56.25%;
}
.responsive-iframe {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
border: none;
}
textarea {
width: 100%;
height: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>video1</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="Styles/video1.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="box1 col-lg-8 col-md-8 col-sm-11">
<div class="iframe-container">
<iframe class="responsive-iframe" src="https://www.youtube.com/embed/JSDuy7v73wI" title="YouTube video player" frameborder="0"></iframe>
</div>
<ul class="nav nav-tabs navigation-table" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#Q&A" role="tab" aria-controls="home" aria-selected="true">Q&A</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#Resources" role="tab" aria-controls="profile" aria-selected="false">Resources</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="Q&A" role="tabpanel" aria-labelledby="home-tab">
<textarea name="" id="" cols="100" rows="10" placeholder="Ask the community a question"></textarea>
<p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
</div>
<div class="tab-pane fade" id="Resources" role="tabpanel" aria-labelledby="profile-tab">
<p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</p>
</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
<p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p>
</div>
</div>
</div>
<div class="box2 col-lg-4 col-md-4 col-sm-1">
<ul class="video-table">
<li class="video-lessons"><h5>Course Content</h5></li>
<li class="video-lessons" id="video1"><p>1. How ethereum works and other things to consider</p></li>
<li class="video-lessons" id="video2"><p>2. An Interview with Elon Musk about the future</p></li>
<li class="video-lessons" id="video3"><p>3. Reference material for plasma physics</p></li>
<li class="video-lessons" id="video4"><p>4. Reference material for plasma physics</p></li>
<li class="video-lessons" id="video5"><p>5. Another broken video link</p></li>
<li class="video-lessons" id="video6"><p>6. Zendaya saying something about her bf</p></li>
<li class="video-lessons" id="video7"><p>7. Some broken video about something</p></li>
<li class="video-lessons" id="video8"><p>8. Hawk stares his resuer down</p></li>
</ul>
</div>
</div>
</div>
<script src="jQuery/jQuery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="JS/index.js"></script>
</body>
</html>
希望这是有道理的。如果您有任何问题，请告诉我。
我正在尝试创建一个类似于 Udemy 或 Khan Academy 中的模块的页面。
我收集了大约 20 个我想开始的视频。
我查看了 Udemy 和可汗学院的代码，似乎列出模块不同课程的侧边栏只是一个带有锚标记的无序列表。
但是当我点击它们时，我不知道如何在页面的主要部分播放这些视频。
我还应该注意，我正在尝试仅使用 HTML 和 CSS 来执行此操作，因为我对 JS 还是很陌生。
任何帮助或指点将不胜感激！
仅使用 HTML/CSS 无法做到这一点（除了完全过时的框架集概念）。您需要的是一个脚本（Javascript/jQuery 或类似脚本），它在单击时将所需的 video/s 加载到主要部分，changing/updating 该部分的 HTML 代码。要获得更详细的描述，您必须 post 您页面的确切 HTML 代码。
谢谢@Johannes 和@VC.One。我实际上通过使用 jQuery.
弄清楚了我想要做什么第 1 步 - 我创建了一个 HTML 文件，其中包含一个容器 div、一行 div 和两列 div。
第 2 步 - 第一列 div 是我的视频播放的主要部分。我在视频中嵌入了一个 iframe，其来源是 url。
第 3 步 - 我使用第二列创建了一个无序列表 ul，我列出了 7 个列表项 li。然后我给每个li一个id。
第 4 步 - 我使用 CSS 通过将光标更改为鼠标悬停时的指针来使每个
第 5 步 - 最后，我使用 jQuery 更改了 iframe 的源属性，每当我点击一个 li 时。
$("#video1").click(function() {
$("iframe").attr("src", "https://www.youtube.com/embed/JSDuy7v73wI");
});
$("#video2").click(function() {
$("iframe").attr("src", "https://www.youtube.com/embed/DxREm3s1scA");
});
$("#video3").click(function() {
$("iframe").attr("src", "https://www.youtube.com/embed/6JipQNWuYnA");
});
$("#video4").click(function() {
$("iframe").attr("src", "https://www.youtube.com/embed/w_DKWlrA24k");
});
$("#video5").click(function() {
$("iframe").attr("src", "https://www.youtube.com/embed/zmBWPLShmXI");
});
$("#video6").click(function() {
$("iframe").attr("src", "https://www.youtube.com/embed/KoHG6kKxJas");
});
$("#video7").click(function() {
$("iframe").attr("src", "https://www.youtube.com/embed/OT8w4dx_N8U");
});
$("#video8").click(function() {
$("iframe").attr("src", "https://www.youtube.com/embed/r4xp1nq_suc");
});
.box2 {
background-color: #f7f9fa;
border: 1px solid black;
padding-right: 0;
padding-left: 0;
}
.video-table {
list-style-type: none;
padding: 0;
text-align: left;
}
.video-lessons {
border: 1px solid white;
color: black;
font-size: large;
padding: 5%;
width: 100%;
height: auto;
}
.video-lessons:hover {
cursor: pointer;
background-color:#d1d7dc;
}
.iframe-container {
position: relative;
width: 100%;
overflow: hidden;
padding-top: 56.25%;
}
.responsive-iframe {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
border: none;
}
textarea {
width: 100%;
height: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>video1</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="Styles/video1.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="box1 col-lg-8 col-md-8 col-sm-11">
<div class="iframe-container">
<iframe class="responsive-iframe" src="https://www.youtube.com/embed/JSDuy7v73wI" title="YouTube video player" frameborder="0"></iframe>
</div>
<ul class="nav nav-tabs navigation-table" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#Q&A" role="tab" aria-controls="home" aria-selected="true">Q&A</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#Resources" role="tab" aria-controls="profile" aria-selected="false">Resources</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="Q&A" role="tabpanel" aria-labelledby="home-tab">
<textarea name="" id="" cols="100" rows="10" placeholder="Ask the community a question"></textarea>
<p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
</div>
<div class="tab-pane fade" id="Resources" role="tabpanel" aria-labelledby="profile-tab">
<p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</p>
</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
<p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p>
</div>
</div>
</div>
<div class="box2 col-lg-4 col-md-4 col-sm-1">
<ul class="video-table">
<li class="video-lessons"><h5>Course Content</h5></li>
<li class="video-lessons" id="video1"><p>1. How ethereum works and other things to consider</p></li>
<li class="video-lessons" id="video2"><p>2. An Interview with Elon Musk about the future</p></li>
<li class="video-lessons" id="video3"><p>3. Reference material for plasma physics</p></li>
<li class="video-lessons" id="video4"><p>4. Reference material for plasma physics</p></li>
<li class="video-lessons" id="video5"><p>5. Another broken video link</p></li>
<li class="video-lessons" id="video6"><p>6. Zendaya saying something about her bf</p></li>
<li class="video-lessons" id="video7"><p>7. Some broken video about something</p></li>
<li class="video-lessons" id="video8"><p>8. Hawk stares his resuer down</p></li>
</ul>
</div>
</div>
</div>
<script src="jQuery/jQuery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="JS/index.js"></script>
</body>
</html>
希望这是有道理的。如果您有任何问题，请告诉我。