nafasmedia | halo teman teman berjumpa kembali dengan saya, dan kali ini saya akan memberikan cara membuat Pop up iframe youtube. apa itu pop up ifram youtube? jika biasanya kita melihat diwebsite website dan disana terdapat sebuah video youtube yang bisa diputar disana, itulah yang dinamakan ifram youtube atau video yang diembed dari youtube. tapi yang kita buat kali ini adalah iframe youtube yang akan muncul jika sebuah tombol ditekan atau diklik, jika tombol tersebut diklik maka akan muncul video dari youtube yang sudah kita embed sebelumnya.
Pop up iframe ini sangat cocok untuk dipakai diblog yang memiliki konten review video,review film dll yang berkaitan dengan video, dan bukan cuma video dari youtube yang bisa dipasang melainkan video yang diupload diGoogle Drive dan diambil kode embednya pun bisa dipasang juga.
Jika penasaran bagaimana bentuk Pop up yang akan kita buat silahkan cek dicodepen dibawah ini.
Atau
Bagaimana, Tertarik untuk membuatnya? jika iya silahkan simak caranya dibawah ini.
Karena untuk memicu keluarnya Pop up iframe dari youtube kita membutuhkan sebuah tombol dan tombol yang kita buat ini akan kita kasih sebuah icon dan icon tersebut menggunakan font awesome jadi silahkan pasang dahulu font awesome, apabila kalian tidak ingin memberi icon juga gapapa tidak masalah jadi tergantung keiginan kalian.lanjuttt
Pertama Silahkan masuk ke akun blogger masing masing, masuk kehalaman template lalu pilih edit html, dan jika sudah copy atau salin kode dibawah dan paste atau tempel sebelum atau diatas kode </style>.
a.btnpopupyt{border:1.5px solid blue; background:blue; padding: 5px;color:#fff; font-size: 15px; line-height: 13px; display: inline-block; transition: all .3s; border-radius: 10px;text-decoration:none}
a.btnpopupyt:hover{color:#fff;background-color:none}
#popup { position:fixed;visibility:hidden; opacity:0; margin-top:-300px; }
#popup:target { visibility:visible; opacity:1; background-color:rgba(255,255,255,0.7); position:fixed; top:0; left:0; right:0; bottom:0; margin:0; z-index:99999999999; -webkit-transition:all 1s; -moz-transition:all 1s; transition:all 1s; }
@media (min-width:768px) { .popup-container { width:600px; } }
@media (max-width:767px) { .popup-container { width:100%; } }
.popup-container { position:relative; margin:7% auto; padding:0px 0px; background-color:#333; color:#fff; border-radius:3px; }
a.popup-close { position:absolute; top:3px; right:3px; background-color:#fff; padding:7px 10px; font-size:20px; text-decoration:none; line-height:1; color:#333; } Jangan lupa untuk menyimpan template, Setelah itu buat postingan atau buat halaman untuk mencoba apakah tombol sudah berfungsi atau belum. silahkan buat satu postingan atau halaman dan apabila sudah masuk ganti mode tampilan menulis ke mode tampilan HTML. lalu copy atau salin kode html dibawah dan paste atau tempel saja disana.
<div id="closed"></div>
<a href="#popup" class="btnpopupyt"><i class="fas fa-video"></i> Trailer</a>
<div class="popup-wrapper" id="popup">
<div class="popup-container">
<center>
<iframe width="560" height="315" src="kode iframe dari youtube" frameborder="0" allowfullscreen></iframe>
</center>
<a class="popup-close" href="#closed">X</a>
</div>
</div> Ganti tulisan "kode iframe dari youtube" menjadi kode iframe dari youtube sesuai keinginan kalian atau ganti juga teks trailer menjadi teks yang kalian sukai. jika sudah silahkan beri judul dan publikasikan, setelah itu silahkan lihat atau preview apakah pop up iframe youtube berfungsi dengan baik atau tidak.
Baiklah itu dia cara membuat Pop up iframe youtube diblogger, bagaimana simple dan keren kan? jika iya silahkan bagikan postingan ini agar teman teman kalian ikut tau cara membuat Pop up iframe youtube. Terimakasih sudah berkunjung dan sampai jupa dinext artikel.
0 Comments