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 agar 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 membuat video menjadi responsive di tutorial yang sebelumnya, bisa baca di post berikut ini..

Tutorial Blogger Lainnya :

• jQuery Popup iFrame Video Responsive

• Cara Mudah 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, bisa liat di link berikut ini..Demo Embed Video Responsive

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

Untuk tutorialnya, bisa simak di bawah ini..

Tutorial Membuat Tombol Button Video Youtube Full Screen Responsive

• Login dulu ke akun blogger kalian

• Setelah login, masuk ke menu Template, Edit HTML

• Setelah masuk ke Edit HTML, kalian cari kode </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 kode jquery, bagi kalian yang ditemplatenya belum ada kode jquery, silahkan masukan script dibawah ini tepat di atas kode </head> agar popupnya bekerja..


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

• Masih di edit html, sekarang kalian cari kode </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 kode dibawah ini

• Pilih salah satu kode pemanggil video youtube yang kalian suka / yang menurut 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 bisa menggunakan kode 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 tentang Cara Membuat Button Video Youtube Full Screen Responsive ini bermanfaat.
Kalo ada yang mau ditanyakan / tidak mengerti, silahkan bertanya di kolom komentar :)