我想在左侧有不同的按钮来打开不同的链接，但我想让关闭按钮成为一个通用按钮。我不想让它关心打开不同链接的不同按钮，我只想让它关闭打开的任何视频(它有效(。但是，我希望按钮可以打开不同的链接。我该怎么做？有人能帮忙吗？
<!DOCTYPE html>
<html lang="hu">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-image: url('background.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
margin: 0;
padding: 0;
}
.focim {
color: white;
margin-bottom: 50px !important;
text-align: center;
}
#videoIframe {
display: none;
position: absolute;
margin-left: 33vw;
margin-top: -65vh;
border-style: solid;
border-width: 5px;
border-color: white;
}
#videoIframe:hover {
border-style: solid;
border-width: 5px;
border-color: rgba(231, 231, 10, 0.5);
}
#stop_vid {
display: none;
position: absolute;
transition: 0.3s;
padding: 5px 8px;
text-align: center;
text-decoration: none;
font-size: 13px;
margin: -520px 2px;
cursor: pointer;
border-radius: 50%;
left: 90%;
margin-bottom: 500px;
background-color: rgba(250, 250, 250, 0.6);
}
#stop_vid:hover {
background-color: rgba(255, 255, 255, 1);
transform: rotate(90deg);
}
#open_vid {
position: relative;
text-align: center;
transition: all ease 0.1s;
margin-left: 50%;
margin-right: 50%;
background: linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
background-color: #ffffff;
border-radius: 42px;
border: 3px solid #dcdcdc;
display: inline-block;
cursor: pointer;
color: #666666;
font-family: Georgia;
font-size: 15px;
font-weight: bold;
padding: 10px 15px;
text-decoration: none;
transition: all ease 1s;
margin-bottom: 20px;
width: 13vw;
overflow: hidden;
}
#open_vid:hover {
background: linear-gradient(to bottom, #c4f6f6 5%, #fffff3 100%);
background-color: #f6f6f6;
width: 16vw;
}
#open_vid:active {
position: relative;
top: 1px;
}
@media all and (max-width:30em) {
#open_vid {
display: block;
margin: 0.4em auto;
}
}
.gombok {
width: 50px;
height: 500px;
}
@media screen and (max-width: 700px) {
#videoIframe {
width: 50vw;
height: 300px;
}
}
@media screen and (max-width: 700px) {
#open_vid:hover {
width: 50vw;
}
#open_vid {
overflow: hidden;
}
}
button:focus {
outline: none;
}
</style>
</head>
</head>
<body>
<body>
<!--headline-->
<div class="focim">
<h1>Oktató videók: Matematika</h1>
</div>
<!--Buttons (gombok in hungarian)-->
<div class="gombok">
<button type="button" onclick="nyit()" id="open_vid">Lineáris és abszolút érték függvények ábrázolása</button>
<button type="button" onclick="nyit()" id="open_vid">Négyzetes és gyökös függvények ábrázolása/elemzése</button>
<button type="button" onclick="nyit()" id="open_vid">Egy ingás kísérlet</button>
</div>
<!--video closer button-->
<div class="container">
<button type="button" onclick="zar()" id="stop_vid"><i class="fa fa-close"></i></button>
</div>
<!--video links-->
<div class="video_container">
<div class="videoIframe">
<iframe id="videoIframe" width="560" height="380" src="https://www.youtube.com/embed/h-paQtzKhZ8" frameborder="0" allowfullscreen=""></iframe>
<iframe id="videoIframe" width="560" height="380" src="https://www.youtube.com/embed/Cr6gwI9NwXE" frameborder="0" allowfullscreen=""></iframe>
<!--Teszt apex link-->
<iframe id="videoIframe" width="560" height="380" src="https://youtube.com/embed/CG6MMLbGl_U" frameborder="0" allowfullscreen=""></iframe>
<!--Teszt apex link-->
</div>
</div>
</body>
<!--nyit = open, zar = close-->
<script type="text/javascript">
function zar() {
document.getElementById("videoIframe").style.display = "none";
var ysrc = document.getElementById("videoIframe").src;
var newsrc = ysrc.replace("&autoplay=1", "");
document.getElementById("videoIframe").src = newsrc;
document.getElementById("stop_vid").style.display = "none";
document.getElementById("open_vid").style.display = "inline-block";
}
function nyit() {
document.getElementById("videoIframe").style.display = "inline-block";
document.getElementById("stop_vid").style.display = "inline-block";
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 60%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
.modal-content iframe{
width:100%;
}
@-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
@keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
/* The Close Button */
.close {
color: #000;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
.modal-body {padding: 2px 16px;}
</style>
</head>
<body>
<!-- Trigger/Open The Modal -->
<button id="myBtn" onclick="LoadVideo('vid_1')">Video-1</button>
<button id="myBtn" onclick="LoadVideo('vid_2')">Video-2</button>
<button id="myBtn" onclick="LoadVideo('vid_3')">Video-3</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
</div>
<div class="modal-body">
<iframe id="videoIframe" width="560" height="380" src="" frameborder="0" allowfullscreen=""></iframe>
</div>
</div>
</div>
<script>
//OPEN MODAL
function LoadVideo(vid_id){
var modal = document.getElementById("myModal");
var span = document.getElementsByClassName("close")[0];
modal.style.display = "block";
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
//CHECK BUTTON_ID & LOAD VIDEO
switch (true){
case vid_id == "vid_1":
document.getElementById("videoIframe").src="https://www.youtube.com/embed/h-paQtzKhZ8";
break;
case vid_id == "vid_2":
document.getElementById("videoIframe").src="https://www.youtube.com/embed/Cr6gwI9NwXE";
break;
case vid_id == "vid_3":
document.getElementById("videoIframe").src="https://youtube.com/embed/CG6MMLbGl_U";
break;
default:
document.getElementById("videoIframe").src="";
break;
}
}
</script>
</body>
</html>