Manipulasi Tampilan Video Youtube Di Postingan Blog

Manipulasi Tampilan Video Youtube
Tidak bisa dipungkiri, untuk membuat 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, bisa dari video Youtube ataupun Vimeo dan lainnya dengan cara menggunakan kode embed video yang disediakan.

Dan jika blog Anda menggunakan template responsive, maka sebaiknya jika Anda akan menampilkan video di postingan sebaiknya menggunakan video responsive juga agar tampilan video bisa menyesuaikan lebar postingan di berbagai ukuran device.


Nah jika Anda merasa bosan dengan tampilan video di postingan seperti yang sudah biasa kita lihat, kita bisa memanipulasi tampilan video dengan sebuah Tombol Play dan menggunakan jquery untuk menambah efek show hide videonya. Dengan menggunakan Tombol Play ini juga, kita setidaknya bisa 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.


Bagaimana tertarik untuk mencobanya? Untuk tampilan video responsivenya sama dengan kode responsive yang telah saya share pada postingan sebelumnya pada link di atas tadi, hanya ada penyesuaian 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 kode HTML untuk disimpan di postingan copy kode 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 kode CSS dan Javascript untuk video Youtube responsive yang sudah saya sharing sebelumnya, silahkan hapus kode CSS dan Javascript yang sama dengan kode yang sudah ada di blog.

Selamat mencoba dan semoga dapat 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 memberikan alternatif lain yang bisa dilihat di komentarnya. Namun jika menggunakan kode dari kang Ismet, saya belum mencoba untuk menambahkan efek layer dan efek slide up down pada layernya. Nah untuk menambahkan fungsi mematikan videonya ketika di-close, silahkan tambahkan kode di bawah ini pada kode jquery close-nya untuk menghilangkan videonya ketika di-close dan memunculkannya kembali ke awal.


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

Sehingga kode jquery atau javascriptnya menjadi seperti 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 saya perbaiki dengan javascript di atas untuk otomatis mematikan videonya ketika di-close.

Untuk alternative lain silahkan simak postingannya DI SINI.

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