Alternative Lain Manipulasi Tampilan Video Youtube

Kemarin aku sudah share perihal cara memanipulasi tampilan video Youtube dengan sebuah tombol yang berfungsi untuk menyembunyikan dan menampilkan player video. Sehingga ini sanggup mengatasi atau menyembunyikan loading pada player video di postingan.

Baca juga: Manipulasi Tampilan Video Youtube Di Postingan Blog

Namun pada script pertama, videonya tetap berjalan walaupun playernya disembunyikan dengan klik tombol close. Makara sebelum disembunyikan, videonya harus di-stop dulu dari playernya lalu di-close untuk menyembunyikan playernya.

Kemudian aku mengupdate scriptnya untuk otomatis mematikan videonya dikala tombol close diklik. Logikanya, dikala tombol close diklik maka url videonya dihilangkan dan lalu dimunculkan kembali yang otomatis kembali ke posisi awal video dikala tombol play diklik.

Dan kemarin juga Kang Ismet menunjukkan masukan untuk script yang otomatis play video dikala klik tombol show dan mematikan video (mem-pause video) dikala tombol close diklik. Namun scriptnya sulit aku masukan ke dalam script yang telah ada, artinya dengan script tersebut aku kesulitan untuk memakai div sebagai pengganti iframe video dan sulit memakai pengaruh slide up and down pada playernya.

Akhirnya aku menemukan alternative lain untuk otomatis memainkan videonya dikala tombol play di klik dan mem-pause atau mematikan videonya dikala tombol close diklik dan pengaruh show hide dan slide up and down-nya masih berfungsi. Namun bedanya dengan script dari Kang Ismet, dengan ini video akan kembali ke awal dikala tombol play diklik untuk kedua kali dan seterusnya sesudah tombol close diklik.

Logika pada scriptnya, aku menambahkan autoplay ke iframe-nya dikala tombol play diklik dan mempause video-nya dikala tombol close diklik. Dan pada script ini, kita menambahkan js api video Youtube pada url embed video-nya. Live demonya silahkan coba tombol play di bawah ini.

DEMO

Hanya ada perubahan sedikit pada javascriptnya untuk show hide player dan javascript untuk video loadernya menyerupai di bawah ini.

Kode CSS

 .video-responsive {position: relative;padding-bottom: 56.25%;height: 0;overflow: hidden;margin:8px;}
 .video-responsive iframe,.video-responsive object {position: absolute;top: 0;left: 0;width: 100%;height: 100%;border:0;}
 .playvideo2{padding:0;margin:30px auto;color:#aaa;cursor:pointer;transition:all .4s ease-in-out;max-width:320px;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;}
 .playvideo2:hover{background:#ddd;border:1px solid #999;}
 .playvideo2:hover .play{border:6px solid #444;color:#444;}
 .playvideo2:hover .playtext{color:#444;}
 .playtext{font-size:280%;line-height:70px;display:inline-block;margin-left:10px;transition:all .4s ease-in-out;}
 .videoyoutube2{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;}
 .videoyoutubeContainer2{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-video2{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-video2:hover{color:red;}

Kode HTML

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

Kode Javascript

 <script type='text/javascript'>
 //<![CDATA[
 setTimeout(function(){
 $('.videoplayer').each(function(){
 $(this).replaceWith('<iframe class="videoplayer loader" src="'+$(this).data('src')+'?enablejsapi=1&playerapiid=ytplayer" allowfullscreen="allowfullscreen" height="281" width="500"></iframe>')})},1000);
 //]]>
 </script>
 <script type='text/javascript'>
 $(function() {
     $('.playvideo2').click(function(ev){
     $('.videoyoutubeContainer2').show();
     $('.playvideo2').hide();
     $('.videoyoutube2').css({top:'15%',position:'fixed'});
         $(".videoplayer")[0].src += "&amp;autoplay=1";
         ev.preventDefault();
 });
     $('.close-video2').click(function(){
        $('.videoyoutubeContainer2').hide();
         $('.playvideo2').show();
         $('.videoyoutube2').css({top:'-1000px',position:'absolute'});
         $('.videoplayer')[0].contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');
     });
 });
 </script>

Selamat mencoba...

Sumber https://www.kompiajaib.com/

Share this post