Full Screen Popup Video Youtube Responsive

Tutorial Membuat PopUp Video Youtube Responsive FullScreen Dengan Jquery

Cara Membuat Tombol Button Pop Up Video Youtube Responsive, kali ini di blog mas tamvan akan share lagi tutorial semoga video youtube yang dipasang pada blog menjadi responsive. Sebelumnya saya juga sudah share tutorial yang sama, tapi pada tutorial sebelumnya video yang dipasang pada blog tidak full screen...

Bagi kalian yang ingin melihat tutorial cara menciptakan video menjadi responsive di tutorial yang sebelumnya, dapat baca di post berikut ini..

Tutorial Blogger Lainnya :

• jQuery Popup iFrame Video Responsive

• Cara Praktis Membuat Video Di Blog Responsive Dengan CSS

• Membuat Multi Tab Video Streaming Responsive di Blog

Nah bagi kalian yang ingin melihat tampilan dari FullScreen Video Youtube Responsive ini, dapat liat di link berikut ini..Demo Embed Video Responsive

Dalam tutorial ini kalian dapat memasukan video youtube ke blogger dengan mudah..
Bisa eksklusif copy linknya dari browser menyerupai https://www.youtube.com/watch?v=JoJbQHCvyw0
Bisa juga memasukan video dengan url dingkat, menyerupai https://youtu.be/JoJbQHCvyw0
Atau yang lebih singkat lagi, kalian cukup memasukan idnya saja ke script pemanggil video youtubenya, menyerupai JoJbQHCvyw0

Untuk tutorialnya, dapat simak di bawah ini..

Tutorial Membuat Tombol Button Video Youtube Full Screen Responsive

• Login dulu ke akun blogger kalian

• Setelah login, masuk ke hidangan Template, Edit HTML

• Setelah masuk ke Edit HTML, kalian cari isyarat </body>

• Kalo sudah ketemu, masukan script video responsive ini di atasnya

 <script> $(document).ready(function() { $(&quot;.play-1, .play-2&quot;).ytResponsive(); }); </script> <script src='https://rawgit.com/mastamvan/backup/master/ytResponsive.js' type='text/javascript'/> 

Secript di atas memerlukan isyarat jquery, bagi kalian yang ditemplatenya belum ada isyarat jquery, silahkan masukan script dibawah ini sempurna di atas isyarat </head> semoga popupnya bekerja..


 <script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> 

• Masih di edit html, kini kalian cari isyarat </head>

• Kalo sudah ketemu, masukan css ini diatasnya

 <style type="text/css"> .ytResponsive{z-index:9999;top:0;border:5px solid white;box-sizing:border-box;border-radius:2px} .ytResponsive-iframe{display:block;height:100%;width:100%;border:0} .ytResponsive-overlay{z-index:9998;background:#000;opacity:0.8} .ytResponsive-close{position:absolute;top:0;right:0;border:0;cursor:pointer;background:white;font-weight:bold;padding:7px 8px} .ytResponsive-close.warp::before,.ytResponsive-close.warp::after{border-radius:120% 0} .ytResponsive-close.thick::before,.ytResponsive-close.thick::after{height:3px;margin-top:-2px} .ytResponsive-close:before,.ytResponsive-close:after{content:'';position:absolute;height:2px;width:100%;top:50%;left:0;margin-top:-1px;background:#000} .ytResponsive-close:before{-webkit-transform:rotate(47deg);-moz-transform:rotate(47deg);-ms-transform:rotate(47deg);-o-transform:rotate(47deg);transform:rotate(47deg)} .ytResponsive-close:after{-webkit-transform:rotate(-43deg);-moz-transform:rotate(-43deg);-ms-transform:rotate(-43deg);-o-transform:rotate(-35deg);transform:rotate(-43deg)} a.playvid,button.playvid{padding:7px 8px;background:red;color:white!important;text-decoration:none;font-size:16px;box-shadow:0 2px 5px 0 rgba(0,0,0,.26);text-transform:uppercase;margin:2%;border-radius:3px;font-family:'Open Sans',sans-serif} button.playvid{cursor:pointer;border:none} </style> 

• Sampai di sini, pemasangannya sudah selesai. Sekarang tinggal bagaimana cara penerapannya ke postingan blog.

• Save dulu templatenya

• Sekarang menuju ke postingan baru, masuk ke mode HTML jangan COMPOSE

• Selanjutnya kalian copy isyarat dibawah ini

• Pilih salah satu isyarat pemanggil video youtube yang kalian suka / yang berdasarkan kalian paling mudah.

• Kalian cukup mengganti url https://youtu.be/JoJbQHCvyw0 dengan url video youtube kalian

 <a class="playvid play-1" href="https://youtu.be/JoJbQHCvyw0">Play my video</a> Atau <a class="playvid play-2" href="https://youtu.be/JoJbQHCvyw0">Play my video</a> 

• Atau kalian dapat memakai isyarat di bawah ini

• Agan Cukum mengganti id video youtube JoJbQHCvyw0

 <button class="playvid play-3">Play my video</button> <script> $(document).ready(function() { $(".play-3").ytResponsive({ vid: "JoJbQHCvyw0", ratio: 4/3 }); }); </script>  Atau  <button class="playvid play-4">Play my video</button> <script> $(document).ready(function() { $(".play-4").ytResponsive({ minPaddingY: 200, minPaddingX: 200, vid: "JoJbQHCvyw0", ratio: 21/9 }); }); </script> 

• Nah kalo sudah, kalian tinggal save / lihat pertinjauan dulu

Cukup sekian dan terima kasih, semoga artikel wacana Cara Membuat Button Video Youtube Full Screen Responsive ini bermanfaat.
Kalo ada yang mau ditanyakan / tidak mengerti, silahkan bertanya di kolom komentar :)