Alternative Lain Manipulasi Tampilan Video Youtube

Alternative Lain Manipulasi Tampilan Video Youtube

Bola Hero Gawai

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...

Share this:

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

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

20 Comments Add Comment

Semakin Mantap jadinya kang...
Langsung Praktek.... :)

Balas

pertamax ...., emang kalo satu masalah, seratus jalan keluar, hehehe =)

Balas

Wah Makin Keren kang jadinya
#saya sangat suka blog kompi ajaib , karena selalu menghasilkan yang terbaru , hehhehe

Balas

Wah udah ada solusinya nih Kang,,, makin mantab :)

Balas

Wah keren pisan si akang .. nipu na hehe
Eh kang mau gak lanjutin project template saya coz agak kurang punya waktu nih ...
tadinya mau dibikin premium v gak ada waktu

Balas

wah boleh dicoba nih kang, soalnya saya biasa masukin video yang saya buat kedalam postingan tutor photoshop :D, oh iya kang ngomong2 kode diatas berpengaruh gk ma beban loading blog? :D

Balas

Hehehehe iya mas :)

Balas

Hehehe betul mas :) seperti kata pepatah: Banyak jalan menuju ke Garut heheeh :)

Balas

Hehehehe makasih atas apresiasinya mas :)

Balas

Iya kang hehehe :)

Balas

Boleh kang saya coba nanti :)

Balas

Sebenarnya setiap penambahan kode apalagi kode javascript pasti ada bebannya, namun untungnya ini merupakan kode jquery pendek jadi masih aman :)

Balas
This comment has been removed by the author.

Tutorial keren mas...Semoga saya bisa banyak menimba ilmu di blog nya mas.Dan semoga mas gak bosen2nya membimbing dan menjawab pertanyaan2 dari pecinta blog ini.Oh iya mas,saya mau nanya ne...di blog saya,2 artikelnya thumbnail di homepagenya gak mau nongol mas.Mohon pencerahannya mas...Makasi.Salam Blogger Indonesia!!!

Mampir juga di blog sederhana saya...

www.arickevano.blogspot.com

Balas

Coba semua gambarnya dikasih alt tag, untuk gambar yang thumbnailnya tidak muncul coba tambahkan alt tag nya.

Balas

Wah ada tambahan bumbu masak lagi nih mas Adhy dari post kemarin. Mantep-mantep :D Saya salut sama mas Adhy..

Balas

Oke mas...aku coba!!!maksi untuk pencerahannya mas!!!

Balas

Keren manipulasinya Mas, Ternyata Mas Ady jagonya manipulasi :)

Balas

wadaw mengerikan eu kodena, kelah mang keur rieut ngoprek na ge eghehehe

Balas

Kalo tombolnya dipasang di menu nafigasi gmana ya mas.? bisa ga yaa.

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!

×
×
×