Assalamu’alaikum Warahmatullahi Wabarakaatuh,
Halo Sobat Mas Rizky, berjumpa lagi ya di Website yang sama, dalam kesempatan kali ini admin Masrizky.web.id akan berbagi Terkait Cara Manipulasi Untuk Mempercepat Loading Video YouTube.
Mempercepat loading video YouTube bisa menjadi tantangan, terutama jika koneksi internet tidak stabil atau perangkat yang digunakan tidak memiliki kinerja optimal.
Namun, ada beberapa trik dan tips yang bisa Anda gunakan untuk meningkatkan pengalaman menonton video tanpa buffering yang mengganggu.
Cara Manipulasi Untuk Mempercepat Loading Video YouTube
Pertama, pastikan Anda menggunakan koneksi internet yang stabil dan cepat. Jika memungkinkan, gunakan koneksi Wi-Fi yang lebih cepat atau jaringan seluler 4G/5G untuk streaming video.
Jika kecepatan internet rendah, Anda bisa mencoba menurunkan kualitas video pada pengaturan YouTube. Pilih resolusi yang lebih rendah, seperti 480p atau 360p, yang akan memerlukan lebih sedikit data untuk buffering.
Kedua, perbarui browser atau aplikasi YouTube yang Anda gunakan ke versi terbaru. Versi terbaru biasanya memiliki peningkatan performa dan perbaikan bug yang dapat membantu mempercepat loading video.
Selain itu, bersihkan cache dan cookie pada browser Anda secara berkala untuk memastikan tidak ada data yang menghambat kinerja.
Ketiga, matikan aplikasi atau tab lain yang tidak diperlukan saat menonton video. Aplikasi latar belakang yang berat dapat mengurangi kinerja perangkat Anda dan menyebabkan buffering.
Jika Anda menggunakan komputer, pastikan tidak ada unduhan besar yang berlangsung bersamaan dengan streaming video.
Dengan mengikuti tips-tips ini, Kamu dapat menikmati video YouTube dengan lebih lancar dan tanpa gangguan ya.
Cara Manipulasi Untuk Mempercepat Loading Video YouTube – Bagi kamu yang sering membagikan video baik lagu atau film di blognya, tentunya akan sedikit lambat untuk menampilkan seuah video dari YouTube, karena harus load video yang di iframe atau di embed dulu.
Trik ini bukan mempercepat loading video secara keseluruhan, akan tetapi tampilan awal saja. Cara kerjanya simple, ketika postingan dibuka, maka yang ditampilkan bukan video YouTube melainkan gambar hasil manipulasi jQuery. Video akan diload setelah gambar di klik ya.
Untuk lebih jelas silahkan lihat demo, sebagai catatan, yang ditampilkan adalah gambar2 dan judul palsu, serta gambar capture video.
Untuk menerapkan trik ini, silahkan ikuti langkah mudahnya pada dibawah ini :
Langkah 1 : Pasang script jQuery di atas </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>Catatan : Apabila sudah ada jQuery pada template sobat, lewati langkah ini. jQuery hanya dipasang 1 saja pada template.
Langkah 2 : Simpan kode ini di atas </body> atau di atas </head>
<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>
Langkah 3 : Simpan CSS di atas ]]</b:skin>
.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;
}Simpan Template
Cara Penggunaan
Apabila ingin menampilkan video youtube pada postingan, pada mode HTML tulis kode seperti ini :
<a class="youtube-link" href="URL-Halaman-YouTube">Judul Video</a>contoh :
<a class="youtube-link" href="http://www.youtube.com/watch?v=qxWStRr6mbo">Profil Panti Pelayanan Sosial Anak Wira Adhi Karya Ungaran</a>Kelebihan dan Kekurangannya
Kelebihannya :
Dengan menggunaknan manipulasi ini, menurut saya ada beberapa kelebihan diantaranya lebih SEO friendly dan Valid HTML5 karena tidak menggunakan iframe. Untuk lebih sempurna, bisa ditambahkan tag title.
Kekurangannya :
Kalau sobat jeli, diantara kekurangannya semua durasi sama yaitu 0:13 🙂 Tapi hal ini bisa diperbaiki dengan mengupload gambar lain, dengan durasi yang lebih panjang.
