. .
[iklan]

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

0 comments:

Posting Komentar

Catatan Sementara

Assalamualaikum warahmatullahi wabarakatuh Bismillahirrohmanirrohim رَبَّنَا ظَلَمْنَاۤ اَنْفُسَنَا وَاِ نْ لَّمْ تَغْفِرْ لَـنَا وَتَرْحَمْنَا لَـنَكُوْنَنَّ مِنَ الْخٰسِرِيْنَ "Ya Tuhan kami, kami telah menzalimi diri kami sendiri. Jika Engkau tidak mengampuni kami dan memberi rahmat kepada kami, niscaya kami termasuk orang-orang yang rugi." (QS. Al-A'raf 7: Ayat 23). Ya Rahman ya Rahim, Jagalah kami dari neraka JahanamMu yg amat dahsyat. Sungguh, kami tidak akan mampu menjadi penghuninya, walau hanya sesaat. Yaa Aziz aku mohon , kembalikan kami smua di dlm Husnul khotimah.. Yaa ghofar ampuni dosa kedua orang tua kami , sdr2 kami serta orang2 Sholeh dan masukkan klg kami smua dlm surga-Mu . Aamiin 🤲
 
© 2021 Catatan Afandi Kusuma | www.suwur.com | Furniture.Omasae | JayaSteel | OmaSae | suwur | Galvalum | DepoAirIsiUlang | Seluruh Arsip