Manipulasi Tampilan Video Youtube Di Postingan Blog

Tidak sanggup dipungkiri, untuk menciptakan sebuah postingan yang menarik kadang kita memasukan video untuk menunjang postingan yang kita tulis. Atau memang postingan atau blog kita dikhususkan untuk menampilkan video-video, sanggup dari video Youtube ataupun Vimeo dan lainnya dengan cara memakai instruksi embed video yang disediakan.

Dan kalau blog Anda memakai template responsive, maka sebaiknya kalau Anda akan menampilkan video di postingan sebaiknya memakai video responsive juga biar tampilan video sanggup menyesuaikan lebar postingan di banyak sekali ukuran device.

Baca juga: Modifikasi Tampilan Video Youtube Responsive Valid HTML5 Seo Friendly

Nah kalau Anda merasa bosan dengan tampilan video di postingan ibarat yang sudah biasa kita lihat, kita sanggup memanipulasi tampilan video dengan sebuah Tombol Play dan memakai jquery untuk menambah pengaruh show hide videonya. Dengan memakai Tombol Play ini juga, kita setidaknya sanggup menghilangkan loading pada tampilan videonya yang biasanya berupa tampilan blank.

Untuk Live Demo-nya silahkan lihat dan coba Tombol Play Video di bawah ini. Silahkan klik tombolnya.

DEMO

Bagaimana tertarik untuk mencobanya? Untuk tampilan video responsivenya sama dengan instruksi responsive yang telah aku share pada postingan sebelumnya pada link di atas tadi, hanya ada pembiasaan sedikit, maka silahkan simak dengan cermat. Untu kode-kode manipulasi tampilan video Youtube ini silahkan copy kode-kode di bawah ini.

Kode CSS

 .playvideo{padding:0;margin:30px auto;color:#aaa;cursor:pointer;transition:all .4s ease-in-out;width:35%;height:80px; background:#eee;border-radius:5px;padding:10px;border:1px solid #ddd;clear:both} .play{border:6px solid #aaa;border-radius:50%;font-size:280%;line-height:70px;display:inline-block;height:70px;width:70px;text-align:center;transition:all .4s ease-in-out;} .playvideo:hover{background:#ddd;border:1px solid #999;} .playvideo:hover .play{border:6px solid #444;color:#444;} .playvideo:hover .playtext{color:#444;} .playtext{font-size:280%;line-height:70px;display:inline-block;margin-left:10px;transition:all .4s ease-in-out;} .videoyoutube1{text-align: center;background:linear-gradient(to bottom, #fefefe 0%, #d1d1d1 100%);border-radius:5px;width:50%;box-shadow: 1px 30px 30px -26px #000;position: absolute;left:50%;margin-left:-25%;top:-1000px;z-index:9999;transition: all 0.4s ease-in-out;} .videoyoutubeContainer{position:fixed;left:0;right:0;bottom:0;top:0;background:transparent;background:rgba(0, 0, 0, 0.5); display:none; z-index:9999;transition: all 0.4s ease-in-out;} .close-video{position: absolute;top:-18px;right:-20px;color:#333;font-family:Arial;font-weight:700;border-radius:50%;background:#fff;font-size:22px;height:20px;width:20px;line-height:20px;text-align:center;cursor:pointer;} .close-video:hover{color:red;} .video-responsive {position: relative;padding-bottom: 56.25%;height: 0;overflow: hidden;margin:8px;} .video-responsive iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;border:0;}

Kode Javascript

 <script type='text/javascript'> //<![CDATA[ setTimeout(function(){ $('.video-youtube').each(function(){ $(this).replaceWith('<iframe class="video-youtube loader" src="'+$(this).data('src')+'" allowfullscreen="allowfullscreen" height="281" width="500"></iframe>')})},1000); //]]> </script> <script type='text/javascript'> $(function() {     $('.playvideo').click(function(){     $('.videoyoutubeContainer').show();     $('.playvideo').hide();     $('.videoyoutube1').css({top:'15%',position:'fixed'}); });     $('.close-video').click(function(){        $('.videoyoutubeContainer').hide();         $('.playvideo').show();         $('.videoyoutube1').css({top:'-1000px',position:'absolute'});     }); }); </script>

Kode HTML
Dan instruksi HTML untuk disimpan di postingan copy instruksi di bawah ini. Silahkan ganti URL embed video-nya dengan URL embed video yang ingin Anda tampilkan.

 <div class="playvideo"> <span class="play">&#9658;</span><span class="playtext">Play Video</span>     </div> <div class="videoyoutubeContainer"></div> <div class="videoyoutube1"> <div class="video-responsive"> <div class="video-youtube loader" data-src="//www.youtube.com/embed/fcr2VSNf7LI"></div>     </div>     <div class='close-video' title='Close'>&#215;</div>     </div>

Jika Anda sudah pernah menyimpan instruksi CSS dan Javascript untuk video Youtube responsive yang sudah aku sharing sebelumnya, silahkan hapus instruksi CSS dan Javascript yang sama dengan instruksi yang sudah ada di blog.

Selamat mencoba dan semoga sanggup dimengerti...

Update:

Seperti kata mas Munawir Alfikri di komentar, bahwa meskipun player di-close ternyata videonya tidak ikut close (video masih menyala). Dan Kang Ismet menunjukkan alternatif lain yang sanggup dilihat di komentarnya. Namun kalau memakai instruksi dari kang Ismet, aku belum mencoba untuk menambahkan pengaruh layer dan pengaruh slide up down pada layernya. Nah untuk menambahkan fungsi mematikan videonya saat di-close, silahkan tambahkan instruksi di bawah ini pada instruksi jquery close-nya untuk menghilangkan videonya saat di-close dan memunculkannya kembali ke awal.

         var video = $('.video-youtube').attr("src");
         $('.video-youtube').attr("src","");
         $('.video-youtube').attr("src",video);

Sehingga instruksi jquery atau javascriptnya menjadi ibarat di bawah ini

 <script type='text/javascript'>
 //<![CDATA[
 setTimeout(function(){
 $('.video-youtube').each(function(){
 $(this).replaceWith('<iframe class="video-youtube loader" src="'+$(this).data('src')+'" allowfullscreen="allowfullscreen" height="281" width="500"></iframe>')})},1000);
 //]]>
 </script>
 <script type='text/javascript'>
 $(function() {
     $('.playvideo').click(function(){
     $('.videoyoutubeContainer').show();
     $('.playvideo').hide();
     $('.videoyoutube1').css({top:'15%',position:'fixed'});
 });
     $('.close-video').click(function(){
        $('.videoyoutubeContainer').hide();
         $('.playvideo').show();
         $('.videoyoutube1').css({top:'-1000px',position:'absolute'});
         var video = $('.video-youtube').attr("src");
         $('.video-youtube').attr("src","");
         $('.video-youtube').attr("src",video);
     });
 });
 </script>

Silahkan coba tombol play video di atas, sudah aku perbaiki dengan javascript di atas untuk otomatis mematikan videonya saat di-close.

Untuk alternative lain silahkan simak postingannya DI SINI.

Sumber https://www.kompiajaib.com/

Share this post