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 biar 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 :


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 ibarat https://www.youtube.com/watch?v=JoJbQHCvyw0
Bisa juga memasukan video dengan url dingkat, ibarat https://youtu.be/JoJbQHCvyw0
Atau yang lebih singkat lagi, kalian cukup memasukan idnya saja ke script pemanggil video youtubenya, ibarat 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> biar 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
    • Membuat Video Youtube Menjadi Responsive Full Screen
  • 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 perihal Cara Membuat Button Video Youtube Full Screen Responsive ini bermanfaat.
Kalo ada yang mau ditanyakan / tidak mengerti, silahkan bertanya di kolom komentar :)

Comments

Post a Comment

Popular posts from this blog

Cara Menciptakan Recent Comments Disqus

Image
Cara Membuat Widget Recent Comments Disqus Di Blog Cara Memasang Recent Comments Disqus Di Blogger , Pada postingan kali ini saya selaku admin blog mas tamvan akan menyebarkan tutorial memasang sebuah widget komentar disqus di website blogger. Widget Komentar terbaru ini khusus bagi kalian yang memasang komentar disqus di blognya, jadi kalo kalian memasang widget ini tapi tidak memasang komentar disqus atau tidak ada yang komentar di akun disqus kalian. maka tampilannya akan kosong. Buat kalian yang memasang komentar bawaan blogger, mungkin nanti saya akan posting d lalu hari.. Widget komentar disqus ini sangat simple kalian tinggal pasang dan udah jadi tinggal sesuain sendiri tampilannya dengan selera kalian. Okeh tanpa basa busuk lagi mari kita masuk ke tahap pemasangan widget recent comments disqus di blog. Login ke Blogger.com Masuk ke Tataletak , klik Tambahkan Gadget atau add widget Lalu cari dan klik HTML/Javascript , teladan lihat gambar. S...
Read more

Ox-Zm 2020 Blogger Template Seo Responsive Clean Css3

Image
Premium Blogger Template 2020 SEO, RESPONSIVE, Mobile Friendly Download Premium Blogger Templates 2020 Seo Responsive , hallo 2020 di awal bulan ini blog mas tamvan menciptakan template gres yang tentunya fast loading, clean, responsive, mobile friendly dan mobile ready. Untuk fitur dan tampilannya dapat lihat dibawah ini. Features Availability Responsive True Cek SEO True Cek Google Testing Tool Validator True Cek Google Page Speed True Cek GTMETRIX True Cek 2 Column Style Post True Google Friendly True Clean Typography True Minimalist True ...
Read more

Membuat Multi Tab Server Video Streaming Ibarat Layarkaca21

Image
Tutorial Cara Membuat Multi tab Video Streaming Click to Load Iframe Memasang Tab Pilihan Server Untuk Video Streaming di Blog , kali ini saya akan membagikan lagi sebuah widget untuk blog movie yang akan menampilkan beberapa pilihan server dan kualitas video yang berbeda ibarat pada wrbsite layar kaca Buat kalin yang menciptakan blog moveie tentunya harus menciptakan beberapa video / Film cadangan di server yang berbeda untuk jaga-jaga apabila di server yang satunya ada problem / sedang maintenance. Sebelumnya saya juga sudah pernah share artikel yang sama tapi pada tutorial sebelumnya video yang di pasang akan diload secara bersamaan dikala blog / halaman di buka. Nah pada widget Responsive Multi Tab Video Streaming ini video / iframe yang ada didalamnya akan di load dikala tombol button di klik . Makara tidak akan memberatkan loading blog kalian.. Demo Multi Tab Video Streaming Nah untuk tutorialnya kalian dapat ikuti langkah demi langkah dibawah ini Membuat Multi Tab S...
Read more