Ingin Menyisipkan Video dari Youtube? Gunakan Metode Ini Sob!

Tanpa mengurangi kecepatan loading blog

Posted by Jefry Dewangga on November 22, 2015

Hello Buddy! Melanjutkan tips dan trik untuk mempercepat loading blog. Kali ini aku akan share cara menyisipkan video Youtube tanpa berdampak apapun terhadap kecepatan loading blog kamu.

Pada umumnya kita menyisipkan video Youtube menggunakan tag <iframe>. Namun dampak penggunaan tag tersebut adalah waktu loading blog akan bertambah. Karena ukuran pemutar video Youtube saja sekitar ~450kb per video.

Belum lagi jika kamu menyisipkan beberapa video sob, udah berapa MB tuh. Kan kasihan tuh yang kuota internetnya sedikit. Walaupun peramban kamu menyimpan cache untuk pemutar video Youtube tersebut, tetap saja ia akan menambah waktu loading blog kamu sob.

Solusi

Idenya cukup sederhana, yakni kita hanya menampilkan thumbnail video dengan sebuah tombol play. Kemudian pemutar video Youtube akan termuat setelah gambar tersebut di klik.

Penerapan

1. Salin dan tempel kode CSS berikut di atas kode </style>:

.youtube {
	position:relative;
	cursor:pointer;
	background:#ccc no-repeat center center / cover;
	padding-bottom:56.25%;
	height:0;
	clear:both;
}

.youtube::before {
	content:'';
	background:rgba(255,255,255,.6);
	height:80px;
	width:80px;
	display:block;
	margin:-40px 0 0 -40px;
	border-radius:100px;
	position:absolute;
	top:50%;
	left:50%;
	box-shadow:0 0 20px 3px rgba(51,51,51,.8);
	transition:all .1s ease;
	z-index:1;
}

.youtube:hover::before {
	background:rgba(238,238,238,.8);
	box-shadow:0 0 10px 3px rgba(51,51,51,.8);
	width:100px;
	height:100px;
	margin:-50px 0 0 -50px;
}

.youtube::after {
	content:'';
	width:0;
	height:0;
	line-height:0;
	display:block;
	border-style:solid;
	border-width:20px 0 20px 40px;
	margin:-20px 0 0 -15px;
	border-color:transparent transparent transparent #333;
	position:absolute;
	top:50%;
	left:50%;
	height:0;
	width:0;
	z-index:2;
}

.youtube iframe {
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	z-index:3;
}

2. Sebelum melanjutkan ke langkah selanjutnya, cek terlebih dahulu apakah blog kamu sudah terpasang jQuery atau belum dengan cara buka salah satu halaman blog kamu, kemudian tekan CTRL + U, lalu tekan CTRL + F, selanjutnya ketik "jQuery" (tanpa tanda petik).

3. Salin dan tempel kode JS berikut di atas kode </body>:

<script>
$(document).ready(function() {
	$(".youtube").each(function() {
		$(this).css("background-image", "url(//i.ytimg.com/vi/" + this.id + "/sddefault.jpg)"), $(document).delegate("#" + this.id, "click", function() {
			var a = "//www.youtube.com/embed/" + this.id + "?autoplay=1&autohide=1";
			$(this).data("params") && (a += "&" + $(this).data("params"));
			var e = $("<iframe/>", {
				allowfullscreen: "allowfullscreen",
				frameborder: "0",
				src: a
			});
			$(this).append(e)
		})
	})
});
</script>

4. Untuk menampilkan video youtube gunakan kode HTML berikut <div class="youtube" id="###"></div> dan ganti ### dengan ID video yang ingin kamu tampilkan.

Contohnya jika kamu ingin menampilkan video dengan URL ini https://www.youtube.com/watch?v=7V-fIGMDsmE, maka 7V-fIGMDsmE merupakan kode video tersebut. Dan kode HTML tersebut akan menjadi <div class="youtube" id="7V-fIGMDsmE"></div>.

Demo

#1 Landscapes: Volume 4K


#2 Planet Earth: Amazing Nature Scenery


#3 Iceland Scenery


Kesimpulan

Menyisipkan video Youtube di blog bisa cukup menguntungkan untuk menunjang artikel yang kamu tulis sob. Tapi perhatikan juga bahwa satu video Youtube dapat menambah berat blog kamu.

Kamu dapat menggunakan metode ini untuk menyisipkan video Youtube tanpa mengurangi kecepatan loading blog kamu sedikit pun. Kelebihan lainnya adalah player video Youtube ini responsive sob, yang artinya dapat menyesuaikan dengan ukuran layar.

Referensi