Manipulasi Tampilan Video Youtube Di Postingan Blog

Manipulasi Tampilan Video Youtube Di Postingan Blog

Bola Hero Gawai

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.

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

22 Comments Add Comment

hehe ada juga cara ini ya mas, tapi ternyata lebih hemat loading :)

Balas

mantap kang bisa langsung dipraktekkan..
terima kasih ilmunya kang... :) :)

Balas

Ke empat. hehe =)D
boleh terapin nih kang.

Balas

Saya pelajari (praktek) di jsfidle, kok ada sisa kode dari js-nya ya Mas Adhy, seperti ini : //]]>

Bagaimana ya mas Adhy?. Terima kasih.

Balas

Tapi walaupun diclose, Video nya masih aktif kang ..

Balas

Betul sis hemat loading juga :)

Balas

Hehehehe makasih mas :) silahkan dicoba :)

Balas

Sama-sama mas :)

Balas

Silahkan mas :)

Balas

Kode //<![CDATA[ ini dan penutupnya jangan disertakan mas :)

Balas

Betul mas, untuk videonya play dan stopnya tetap pada playernya :)

Balas

Beuuuh.. Kang Adhy tambah ganas aja JS sama JQuerynya :-bd
saran dikit boleh ya kang, supaya tombol closenya langsung stop video, mainkan pauseVideo dan playVideo kurang lebih JS dapet nemu nya kaya gini :

function toggleVideo(state) {
// if state == 'hide', hide. Else: show video
var div = document.getElementById("popupVid");
var iframe = div.getElementsByTagName("iframe")[0].contentWindow;
div.style.display = state == 'hide' ? 'none' : '';
func = state == 'hide' ? 'pauseVideo' : 'playVideo';
iframe.postMessage('{"event":"command","func":"' + func + '","args":""}','*');
}


Demo : http://jsfiddle.net/kangismet/599ju/

Balas

Kalo dibuka di hape gimana Kang tampilan videonya bentuk popup?

Balas

Iya Mas Adhy. Hehehe.. maklumlah.
Terima kasih ya Mas Adhy. ^_^

Balas

Eleuh..eleeeuh.. lieur abdi euy..
Praktek terima mateng wae, masih salah pakai keneh, :ng Naon deui ieu kang Ismet ?. |o|

Salam santun sadayana wae..

Balas

@Kang Ismet hehehehe kan belajar dari akang heheheh
tapi dengan itu jadi tidak ada efek layernya kayaknya ya kang hanya show hide gitu...
Saya coba tambahin ini kang di tombol close-nya
var video = $('.video-youtube').attr("src");
$('.video-youtube').attr("src","");
$('.video-youtube').attr("src",video);

video dihilangkan dan bisa kembali ke awal lagi ketika dibuka, tapi kadang agak telat juga tapi bisa berjalan dengan digabungkan kode jquery yang saya buat. Apakah cukup baik juga kang...hehehehe kayaknya lumayan

Demo: http://jsfiddle.net/kompiajaib/K8xnp/3/

Balas

iya kang di versi mobile juga bentuknya popup :)

Balas

Nah, ini yang saya cari mas Adhy. Akhirnya, saya nemu tutorial ini. Saya lagi memperdalam ilmu dari mas Adhy nih, hehe :)

Balas

Hehehe silahkan mas :)

Balas

Heeem...! mas Adhy ini paling cocok dipanggil koki blogger, racikan kodi-kodinya selalu menghasilkan kreatifitas yang belum pernah saya bayangkan.


Jempol sekampung meluncur mas...!

Balas

Ah mas Andre ada-ada aja heheeheh
makasih jempolnya mas :)

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • 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 Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×