logo blog

Full Screen PopUp Video Youtube Responsive

Full Screen PopUp Video Youtube Responsive

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..



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
  • Membuat Video Youtube Menjadi Responsive Full Screen
  • 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 :)

Share this:

Berlangganan via email

Agan Sedang Membaca Artikel : Full Screen PopUp Video Youtube Responsive. Silahkan masukan email anda dibawah ini! dan nanti akan otomatis mendapatkan kiriman artikel terbaru dari Blog Mas Tamvan. Terimakasih.

Kumpulan Tips Trik Blogger

Blog Mas Tamvan

Terima Kasih Sudah Membaca Artikel Tentang : Full Screen PopUp Video Youtube Responsive. Jika Ada Yang Mau Request Tutorial Silahkan Beri Tahu Saya Di Kolom Komentar :)

1 comment

Super Highlight Talent

gan kalau untuk file flash bisa juga gak? misalnya flas game itu gmn gan?

Saya menunggu komentar anda..

Kalo ada yang error mohon kasih tau admin, supaya bisa secepatnya untuk diperbaiki..

Komentar dengan link promo akan masuk spam.

Tambahkan Spasi Setelah Memasukan Kode Emoticon..
Gunakan kode <i rel="image">URL GAMBAR DI SINI</i> untuk menyertakan gambar di komentar.Show Konversi Kode Hide Konversi Kode Show EmoticonShow Emoticon Hide Emoticon