2 Tasten mit gleichem CSS und JS funktionieren nicht.

Question

Siehe hierzu fiddle. Das ist mein Watch-Trailer-Button, der erste Button funktioniert einwandfrei. Aber der zweite Watch-Trailer-Button funktioniert nicht.

Was ist das Problem damit?

Hier ist mein Code:

HTML:

<button id="watchbutton">Watch Trailer &#9658</button> 
<br> 
<button id="watchbutton">Watch Trailer &#9658</button> 

<div id="close"> 
<div id="trailerdivbox"> 
<div class="videoWrapper"> 
    <iframe id="video" class="trailervideo" width="560" height="315" data- 
src="https://www.youtube.com/embed/TDwJDRbSYbw" src="about:blank" frameborder="0" allowfullscreen></iframe> 
</div> 
</div> 
</div> 

CSS:

/* Watch Trailer Button CSS */ 

#watchbutton { 
background-color: #f2f2f2; 
color: red; 
font-weight: 600; 
border: none; 
/* This one removes the border of button */ 
padding: 10px 12px; 
} 

#watchbutton:hover { 
background-color: #e2e2e2; 
cursor: pointer; 
} 

#trailerdivbox { 
display: none; 
width: 100%; 
height: 100%; 
position: fixed; 
top:0%; 
overflow: auto; /* Enable Scrolling */ 
background-color: rgb(0, 0, 0); 
/* Fallback color */ 
background-color: rgba(0, 0, 0, 0.4); 
/* Black w/ opacity */ 
} 

.videoWrapper { 
position: relative; 
padding-bottom: 56.25%; 
/* 16:9 */ 
padding-top: 25px; 
height: 0; 
} 

.videoWrapper iframe { 
position: absolute; 
max-width: 560px; 
max-height: 315px; 
width: 95%; 
height: 95%; 
left: 0; 
right: 0; 
margin: auto; 
} 

Javascript

<script> 
// Get the modal 
var modal = document.getElementById('trailerdivbox'); 

// Get the button that opens the modal 
var btn = document.getElementById("watchbutton"); 

function playVideo() { 
var video = document.getElementById('video'); 
var src = video.dataset.src; 

video.src = src + '?autoplay=1'; 
} 

function resetVideo() { 
var video = document.getElementById('video'); 
var src = video.src.replace('?autoplay=1', ''); 

video.src = ''; 
video.src = src; 
} 

// When the user clicks the button, open the modal 
btn.onclick = function() { 
modal.style.display = "block"; 
playVideo(); 
} 

var trailerbox = document.getElementById("close"); 

trailerbox.onclick = function() { 
modal.style.display = "none"; 
resetVideo(); 
} 

// When the user clicks anywhere outside of the modal, close it 
window.onclick = function(event) { 
if (event.target == modal) { 
modal.style.display = "none"; 
resetVideo(); 
} 
} 

</script> 

Answer 1

Versuchen mit classname statt id .Because ID ist einzigartig für die gesamte HTML-.Für Selektor Verwendung mit querySelectorAll()

Aktualisiert

declare src des Videos in der data-src der Taste .Dann übergeben Sie das Argument mit playvideo(this.dataset.src) Funktion.

// Get the modal 
 
var modal = document.getElementById('trailerdivbox'); 
 

 
// Get the button that opens the modal 
 
var btn = document.querySelectorAll('.watchbutton') 
 

 
function playVideo(src) { 
 
    var video = document.getElementById('video'); 
 
    video.src = 'https://www.youtube.com/embed/'+src + '?autoplay=1'; //add with iframe 
 
} 
 

 
function resetVideo() { 
 
    var video = document.getElementById('video'); 
 
    var src = video.src.replace('?autoplay=1', ''); 
 

 
    video.src = ''; 
 
    video.src = src; 
 
} 
 

 
// When the user clicks the button, open the modal 
 
btn.forEach(function(a){ 
 
a.onclick = function() { 
 
    modal.style.display = "block"; 
 
    playVideo(this.dataset.src); // pass the src 
 
} 
 
}) 
 

 
var trailerbox = document.getElementById("close"); 
 

 
trailerbox.onclick = function() { 
 
    modal.style.display = "none"; 
 
    resetVideo(); 
 
} 
 

 
// When the user clicks anywhere outside of the modal, close it 
 
window.onclick = function(event) { 
 
    if (event.target == modal) { 
 
    modal.style.display = "none"; 
 
    resetVideo(); 
 
    } 
 
}

/* Watch Trailer Button CSS */ 
 

 
#watchbutton { 
 
    background-color: #f2f2f2; 
 
    color: red; 
 
    font-weight: 600; 
 
    border: none; 
 
    /* This one removes the border of button */ 
 
    padding: 10px 12px; 
 
} 
 

 
#watchbutton:hover { 
 
    background-color: #e2e2e2; 
 
    cursor: pointer; 
 
} 
 

 
#trailerdivbox { 
 
    display: none; 
 
    width: 100%; 
 
    height: 100%; 
 
    position: fixed; 
 
    overflow: auto; 
 
    /* Enable Scrolling */ 
 
    background-color: rgb(0, 0, 0); 
 
    /* Fallback color */ 
 
    background-color: rgba(0, 0, 0, 0.4); 
 
    /* Black w/ opacity */ 
 
} 
 

 
.videoWrapper { 
 
    position: relative; 
 
    padding-bottom: 56.25%; 
 
    /* 16:9 */ 
 
    padding-top: 25px; 
 
    height: 0; 
 
} 
 

 
.videoWrapper iframe { 
 
    position: absolute; 
 
    max-width: 560px; 
 
    max-height: 315px; 
 
    width: 95%; 
 
    height: 95%; 
 
    left: 0; 
 
    right: 0; 
 
    margin: auto; 
 
}

<button id="watchbutton" class="watchbutton" data-src="TDwJDRbSYbw">Watch Trailer &#9658</button> 
 
<br> 
 
<button id="watchbutton" class="watchbutton" data-src="TDwJDRbSYbr">Watch Trailer &#9658</button> 
 

 

 

 
<div id="close"> 
 
    <div id="trailerdivbox"> 
 
    <div class="videoWrapper"> 
 
     <iframe id="video" class="trailervideo" width="560" height="315" data-src="https://www.youtube.com/embed/TDwJDRbSYbw" src="about:blank" frameborder="0" allowfullscreen></iframe> 
 
    </div> 
 
    </div> 
 
</div> 
 
<br>

Answer 2

Sie nicht gleiche IDs haben kann. ändere die ID in etwas anderes.

<button id="watchbutton">Watch Trailer &#9658</button> 
<br> 
<button id="watchbutton2">Watch Trailer &#9658</button> 

Answer 3

Erstens ist es keine gute Praxis identischen IDs zu verwenden.

<button id="watchbutton">Watch Trailer &#9658</button> 

Und wenn Sie

var btn = document.getElementById("watchbutton"); 

verwenden Sie bekommen nur eine Taste (die erste), sollten Sie so etwas wie verwenden:

<button id="watchbutton" class="watchButton">Watch Trailer &#9658</button> 
<br> 
<button id="watchbutton2" class="watchButton" >Watch Trailer &#9658</button> 

Und bekommen sie mit:

var buttons = document.getElementsByClassName("watchButton"); 

Answer 4

Sie sind fast da.

Nachdem Sie das Problem mit den doppelten IDs zu beheben - erwähnt von Frits, Prasad & andere - Sie müssen noch playVideo anweisen, einen anderen Video zu spielen, je nachdem, welche Taste Sie drücken.

Hier ist, wie Sie Ihren Code beheben kann das gewünschte Ergebnis zu erzielen:

// Get the modal 
 
var modal = document.getElementById('trailerdivbox'); 
 

 
// Get the button that opens the modal 
 
var btn1 = document.getElementById("TDwJDRbSYbw"); 
 
var btn2 = document.getElementById("6H_0aem12_I"); 
 

 
function playVideo(id) { 
 
    var video = document.getElementById('video'); 
 
    var src = video.dataset.src + id; 
 

 
    video.src = src + '?autoplay=1'; 
 
} 
 

 
function resetVideo() { 
 
    var video = document.getElementById('video'); 
 
    var src = video.src.replace('?autoplay=1', ''); 
 

 
    video.src = ''; 
 
    video.src = src; 
 
} 
 

 
// When the user clicks the button, open the modal 
 
btn1.onclick = function(e) { 
 
    modal.style.display = "block"; 
 
    playVideo(this.id); 
 
} 
 

 
btn2.onclick = btn1.onclick; 
 

 
var trailerbox = document.getElementById("close"); 
 

 
trailerbox.onclick = function() { 
 
    modal.style.display = "none"; 
 
    resetVideo(); 
 
} 
 

 
// When the user clicks anywhere outside of the modal, close it 
 
window.onclick = function(event) { 
 
    if (event.target == modal) { 
 
    modal.style.display = "none"; 
 
    resetVideo(); 
 
    } 
 
}

/* Watch Trailer Button CSS */ 
 

 
.btn { 
 
    background-color: #f2f2f2; 
 
    color: red; 
 
    font-weight: 600; 
 
    border: none; 
 
    /* This one removes the border of button */ 
 
    padding: 10px 12px; 
 
} 
 

 
.btn:hover { 
 
    background-color: #e2e2e2; 
 
    cursor: pointer; 
 
} 
 

 
#trailerdivbox { 
 
    display: none; 
 
    width: 100%; 
 
    height: 100%; 
 
    position: fixed; 
 
    overflow: auto; 
 
    /* Enable Scrolling */ 
 
    background-color: rgb(0, 0, 0); 
 
    /* Fallback color */ 
 
    background-color: rgba(0, 0, 0, 0.4); 
 
    /* Black w/ opacity */ 
 
} 
 

 
.videoWrapper { 
 
    position: relative; 
 
    padding-bottom: 56.25%; 
 
    /* 16:9 */ 
 
    padding-top: 25px; 
 
    height: 0; 
 
} 
 

 
.videoWrapper iframe { 
 
    position: absolute; 
 
    max-width: 560px; 
 
    max-height: 315px; 
 
    width: 95%; 
 
    height: 95%; 
 
    left: 0; 
 
    right: 0; 
 
    margin: auto; 
 
}

<button class="btn" id="TDwJDRbSYbw">Watch Trailer &#9658</button> 
 
<br> 
 
<button class="btn" id="6H_0aem12_I">Watch Trailer &#9658</button> 
 

 
<div id="close"> 
 
    <div id="trailerdivbox"> 
 
<div class="videoWrapper"> 
 
    <iframe id="video" class="trailervideo" width="560" height="315" data-src="https://www.youtube.com/embed/" src="about:blank" frameborder="0" allowfullscreen></iframe> 
 
</div> 
 
    </div> 
 
</div> 
 
<br>

---

See also this JSFiddle demo