Alternative Lain Manipulasi Tampilan Video Youtube

Manipulasi Tampilan Video Youtube
Kemarin saya sudah share tentang cara memanipulasi tampilan video Youtube dengan sebuah tombol yang berfungsi untuk menyembunyikan dan menampilkan player video. Sehingga ini dapat mengatasi atau menyembunyikan loading pada player video di postingan.


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

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

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

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

Logika pada scriptnya, saya menambahkan autoplay ke iframe-nya ketika tombol play diklik dan mempause video-nya ketika 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.
Hanya ada perubahan sedikit pada javascriptnya untuk show hide player dan javascript untuk video loadernya seperti 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&version=3&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...

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments