Manipulasi Tampilan Video Youtube Di Blog

Halo sobat blogger,Akabarnya? Gimana puasa kalian? Sudah ada yang bolong atau belum,Kalau saya sendiri alhamdulillah belom ada yang bolong.

Dipost kali ini saya akan share Tutorial Manipulasi Tampilan Video Youtube Di Blog.
Banyak blogger yang menulis post blognya menggunakan video entah itu dari Youtube atau Vimeo.
Untuk dari itu agar terlihat menarik dimata visitor maka gunakan Tutorial Manipulasi Video Youtube Di Blog.

Okelah sudah cukup penjelasan dari saya,Sekarang kita masuk ke Cara Penggunaannya.
Cara penggunaannya cukup mudah jika kalian membaca tutorial ini dengan seksama.

1.Login ke blogger
2.Masuk menu Template-Edit HTML
3.Jika sudah cari code ]]></b:skin>,Dan pastekan css berikut tepat dibawahnya

<style type='text/css'>
.videoyoutube2{text-align: center;background:linear-gradient(to bottom, #fefefe 0%, #d1d1d1 100%);border:1px solid #A8A8A8;border-radius:5px;margin:20px auto;width:80%;box-shadow: 1px 30px 30px -26px #818181;}
.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;}
</style>

4.Jika sudah,cari code </body>,Lalu pastekan JS berikut tepat diatasnya

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

5.Jika sudah klik simpan,Dan untuk cara penggunannya silahkan gunakan code berikut

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

6.Selamat mencoba....

1.Pastikan di template kalian sudah terpasang jquery | <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>

Share Ke :