模態彈出與視頻，在關閉後保持播放音頻

我在我的網站上做了一個彈出視頻按鈕。但是，當我關閉它，或者點擊模式輸出空間時，音頻仍然會繼續。模態彈出與視頻，在關閉後保持播放音頻

我該如何解決這個問題？我嘗試了一些JavaScript功能，但我認爲我做錯了什麼...

謝謝！

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

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

 
// Get the <span> element that closes the modal 
 
var span = document.getElementsByClassName("close")[0]; 
 

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

 
// When the user clicks on <span> (x), close the modal 
 
span.onclick = function() { 
 
    modal.style.display = "none"; 
 
} 
 

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

<button type="button" class="button" id="myBtn">Watch Video</button> 
 
<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 width="560" height="315" src="https://www.youtube.com/embed/QH2-TGUlwu4" frameborder="0" allowfullscreen></iframe> 
 
    </div> 
 
    <div class="modal-footer"> 
 
    </div> 
 
</div> 
 

 
</div>

來源

2016-11-30 Stri100

可能的重複此：http://stackoverflow.com/questions/22613303/youtube-video-still-playing-when-bootstrap-modal-closes –

它不起作用，我做了研究之前，我發佈了這個問題 – Stri100

悉心爲您最簡單的辦法就是讓它重置本身並停止重新分配IFRAME SRC視頻值。例如。爲您的iframe指定一個示例id="yplayer"的ID，然後在要停止並重新加載視頻的位置使用以下語句。

document.getElementById('yplayer').src = document.getElementById('yplayer').src;

第二個選擇是使用youtube API函數，這將涉及更多的代碼處理。 Youtube API Docs

希望這會有所幫助。

來源

2016-11-30 14:14:16

模態彈出與視頻，在關閉後保持播放音頻

回答

相關問題