同じCSSとJSの2つのボタンが機能しません。

Question

これを参照してくださいfiddle。これは私の腕時計の予告編ボタンです。最初のボタンは完璧に機能しています。しかし、2番目の時計の予告編ボタンは機能していません。

問題は何ですか？

ここ

が私のコードです：

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

classname代わりのid .Because IDで試してみてくださいは.Thenボタンのdata-srcに映像の

宣言srcを更新querySelectorAll()

でセレクタを使用.FOR全体htmlのためのユニークであります引数をplayvideo(this.dataset.src)として渡します。

// 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

あなたは、同じIDを持つことはできません。 idを別のものに変更する。

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

Answer 3

まず、同じIDを使用することをお勧めではありません。

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

そして、あなたはあなたが唯一のボタン（最初の）を取得

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

を使用する場合、あなたが好きなものを使用する必要があります

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

をそしてそれらを取得する：

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

Answer 4

あなたはほぼそこにいます。

Frits、prasad &他の2 idsの問題を修正した後でも、プッシュするボタンに応じて別のビデオを再生するよう依頼する必要があります（playVideo）。

ここでは、望ましい結果を達成するようにコードを修正することができます方法は次のとおりです。私はこれが唯一の問題であることは言わないよ

// 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