Membuat Link Popup Video Youtube

Tinggal copas kode html, css, dan javascript berikut ini. Sesuaikan yang diberi tanda warna merah. Semoga berguna. dan sebagai catatan saat diperlukan dikemudian hari. Jika ada kesulitan, silakan menulis di komentar.

 <style>
#myBtn{cursor:pointer;border-width:0;font-weight:bold;background-color:transparent;color: #6fa5b8}
#myBtn:hover{color: #2fa5a8}
.modal{display:none;position:fixed;z-index:1;padding-top:calc(50vh - 305px);left:0;top: 0;
  width: 100%;height: 100%;overflow: auto; background-color: rgb(0,0,0);background-color: rgba(0,0,0,0.4);}
.modal-content{margin:auto;width:720px;max-width:100%;}
.close {color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;}
.close:hover,.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer}
</style>

Saksikan mereka yang telah sukses membangun masa depan bersama Ahsana Property: <a title="klik untuk membuka Video"><button id="myBtn"> Selebrasi Akbar STB 300++ </button></a>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<p><iframe width="720" height="405" src="https://www.youtube.com/embed/videoseries?list=PLORQNvDdGpeHvr2g12XjCbpy8FrU20Ult" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></p>
</div>
</div>

<script>
var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
  modal.style.display = "block";
}
span.onclick = function() {
  modal.style.display = "none";
}
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>

Contoh hasil script di atas, bisa dengan mencoba link sebagai berikut:


Contoh link video youtube dengan menampilkan popup saat diklik:

×

.... diklik: Contoh Youtube popup