Cara Mempercepat Loading Video Youtube Di Blog

Selamat datang sob di blog sederhana saya, sudah lama saya tidak berbagi tips dan trik karena urus blog lain. Kali ini saya mau berbagi tips Cara Agar Mempercepat Loading Video Youtube Di Blog. Karena sering sekali loading video terasa berat dan loading yang lama



Dan hal pertama yang harus di lakukan letakan script di bawah ini di atas </head> Tapi jika di dalam template sobat sudah ada script itu lewati saja cara ini

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>


Kemudian cari kode ]]</b:skin>. dan letakan script di bawah ini di atasnya

.youtube-box, .youtube-frame { display:block; width:420px; /* Lebar video */ height:315px; /* Tinggi video */ background-color:black; background-size:100%; position:relative; border:none; margin:0px auto 15px; } .youtube-box span { display:block; position:absolute; top:0px; right:0px; bottom:0px; left:0px; } .youtube-box .youtube-title { background-color:rgba(0,0,0,0.4); font:bold 15px Verdana,Arial,Sans-Serif; color:white; text-shadow:0px 1px 2px black; bottom:auto; line-height:30px; height:30px; overflow:hidden; padding:0px 15px; } .youtube-box .youtube-bar { background:black url('http://4.bp.blogspot.com/-7keKvgPlMUA/T7vJpi3X_YI/AAAAAAAACtw/4OUd7uHadDk/s1600/yt-bar-center.png') repeat-x top; height:35px; top:auto; } .youtube-box .youtube-bar .yt-bar-left { background:transparent url('http://4.bp.blogspot.com/-WL_y2cwe57k/T7xHS3C8tTI/AAAAAAAACug/xIqhenfa-4o/s1600/yt-bar-left.png') no-repeat top left; z-index:4; cursor:pointer; } .youtube-box .youtube-bar .yt-bar-right { background:transparent url('http://1.bp.blogspot.com/-DCNevn4jQx0/T7vJt3X3pjI/AAAAAAAACuA/uIKxoT3685M/s1600/yt-bar-right.png') no-repeat top right; } .youtube-box .youtube-play { cursor:pointer; width:83px; height:56px; top:50%; left:50%; margin:-28px 0px 0px -42px; background:transparent url('http://1.bp.blogspot.com/-JVqaIffy7Ws/T7vK4-ya81I/AAAAAAAACuI/UCL8Y7G4DqE/s1600/yt-play.png') no-repeat top left; } .youtube-box .youtube-play:hover { background-position:bottom left; }

Lalu cari kode </body> atau </head> dan letakan kode di bawah ini di atasnya.

 <script type='text/javascript'>
//<![CDATA[
$(function() {
    $('a.youtube-link').each(function() {
        var yt_url   = this.href,
            yt_id    = yt_url.split('?v=')[1],
            yt_title = $(this).text();
        $(this).replaceWith('<div class="youtube-box" style="background-image:url(http://img.youtube.com/vi/' + yt_id + '/0.jpg);"><span class="youtube-title">' + yt_title + '</span><span class="youtube-bar"><span class="yt-bar-left"></span><span class="yt-bar-right"></span></span><span class="youtube-play"></span></div>');
        $('div.youtube-box').click(function() {
            $(this).replaceWith('<iframe class="youtube-frame" src="http://www.youtube.com/embed/' + yt_id + '?autoplay=1"></iframe>');
        });
    });
});
//]]>
</script>

Kemudian yang terakhir ketika memasukan videonya di blog HTML pasang script seperti ini

 <a class="youtube-link" href="http://www.youtube.com/watch?v=7ssthjff44f">GOYANG GEBOY</a>

Warba PINK adalah ID youtubnya
Warna MERAH adalah judul videonya

silahkan atur sesuai keinginan sobat Cara memasukan Video youtube ke postingan blog  dan semoga tips saya bermanfaat terimakasih
.

0 Response to "Cara Mempercepat Loading Video Youtube Di Blog "

Posting Komentar

Berkomentarlah jika ada yang dubutuhkan