Membandingkan Dua Video Youtube: Yang Belum Dioptimisasi vs Yang Sudah Dioptimisasi.
Mengutip metode oleh Amit Agarwal dari Labnol, cara mempercepat loading video Youtube di blog sebenarnya sangat mudah.
Kita hanya membutuhkan kombinasi antara kode HTML, Javascript, dan bantuan CSS untuk membuat loading-nya cepat sekaligus responsive di seluruh ukuran layar perangkat.
Perbedaan mendasar yang terlihat adalah bagian thumbnail dan tentu saja kecepatan loading video Youtube tersebut.
Nah sekarang, fokus kita adalah mengoptimalkan kecepatan loading video Youtube sehingga blog Anda juga bisa lebih cepat loading-nya. Ikuti tutorial berikut:
Cara Mempercepat Loading Video Youtube di Blog
Yang pertama sekali yang perlu dilakukan adalah menempatkan kode HTML berikut di mana pun Anda ingin meng-embed video, entah itu di widget, di dalam postingan, di mana pun:
<div class="youtube-player" data-id="ID_VIDEO"></div>
Pastikan Anda mengganti ID_VIDEO dengan ID Video Youtube yang ingin Anda embed. Contohnya adalah URL Youtube berikut:A22oy8dFjqc
Maka ID Video-nya adalah: A22oy8dFjqc
Nah setelah itu, kita tinggal menempatkan kode Javascript, bila memungkinkan, tempat kode Javascript berikut di bagian Footer blog Anda sebelum tag </footer>:
<script> document.addEventListener("DOMContentLoaded", function() { var div, n, v = document.getElementsByClassName("youtube-player"); for (n = 0; n < v.length; n++) { div = document.createElement("div"); div.setAttribute("data-id", v[n].dataset.id); div.innerHTML = sberpikirThumb(v[n].dataset.id); div.onclick = sberpikirIframe; v[n].appendChild(div); } }); function sberpikirThumb(id) { var thumb = '<img src="https://i.ytimg.com/vi/ID/hqdefault.jpg">', play = '<div class="play"></div>'; return thumb.replace("ID", id) + play; } function sberpikirIframe() { var iframe = document.createElement("iframe"); var embed = "https://www.youtube.com/embed/ID?autoplay=1"; iframe.setAttribute("src", embed.replace("ID", this.dataset.id)); iframe.setAttribute("frameborder", "0"); iframe.setAttribute("allowfullscreen", "1"); this.parentNode.replaceChild(iframe, this); } </script>
Setelah menempatkan kode Javascript di atas, kita tinggal menggunakan kode CSS untuk membuatnya responsive dan membuat semuanya bekerja dengan baik.
Tempat kode CSS berikut ke dalam blog Anda:
<style> .youtube-player { position: relative; padding-bottom: 56.23%; /* Use 75% for 4:3 videos */ height: 0; overflow: hidden; max-width: 100%; background: #000; margin: 5px; } .youtube-player iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; background: transparent; } .youtube-player img { bottom: 0; display: block; left: 0; margin: auto; max-width: 100%; width: 100%; position: absolute; right: 0; top: 0; border: none; height: auto; cursor: pointer; -webkit-transition: .4s all; -moz-transition: .4s all; transition: .4s all; } .youtube-player img:hover { -webkit-filter: brightness(75%); } .youtube-player .play { height: 72px; width: 72px; left: 50%; top: 50%; margin-left: -36px; margin-top: -36px; position: absolute; background: url("//i.imgur.com/TxzC70f.png") no-repeat; cursor: pointer; } </style>
Nah sekarang, coba lihat bagaimana tampilannya. Apakah sudah sesuai dengan contoh di atas? Lihat juga tampilannya dari smartphone untuk memastikan responsivitasnya.
Bila semuanya sudah bekerja dengan baik, itu artinya Anda sudah berhasil mengimplementasikan cara mempercepat loading video Youtube di blog dalam tutorial kali ini. Selamat!
Untuk berikutnya, Anda hanya perlu menggunakan kode HTML di tahap pertama dan tinggal gunakan ID Video yang baru untuk meng-embed video baru sekaligus mempercepat loading video Youtube di blog Anda.
Cara Mempercepat Loading Video Youtube di Blog Dengan Bantuan Shortcode Untuk Pengguna WordPress
Bila Anda pengguna WordPress, ada cara sederhana untuk menerapkan metode di atas. Bila selama ini, untuk meng-embed video Youtube di postingan blog, Anda hanya perlu meng-copy paste URL blog di text editor atau menggunakan embed code dari video Youtube, kini Anda cukup menggunakan shortcode.
Jadi, setiap kali Anda ingin meng-embed video Youtube sekaligsu mempercepat loading video Youtube di blog, Anda hanya perlu menggunakan shortcode sederhana.
1. Akses dan Modifikasi File Functions.php di Theme WordPress Anda
Pertama-tama, silakan buat WordPress Child Theme atau install plugin My Custom Functions karena kita akan memodifikasi file functions.php atau menggunakan custom functions.
Buka file functions.php bila Anda menggunakan Child Theme atau buka menu PHP Inserter bila Anda menggunakan plugin My Custom Functions.
2. Buat Custom Shortcode
Setelah itu, silakan paste kode berikut:
// Seni Berpikir Youtube Shortcode function sberpikir_youtube($atts, $content = null) { extract(shortcode_atts(array( "src" => '' ), $atts)); return '<div class="youtube-player" data-id="'.$src.'"></div>'; } add_shortcode("youtube", "sberpikir_youtube"); // Seni Berpikir Youtube calling script function ytube_sc() { ?> <script type="text/javascript"> document.addEventListener("DOMContentLoaded", function() { var div, n, v = document.getElementsByClassName("youtube-player"); for (n = 0; n < v.length; n++) { div = document.createElement("div"); div.setAttribute("data-id", v[n].dataset.id); div.innerHTML = sberpikirThumb(v[n].dataset.id); div.onclick = sberpikirIframe; v[n].appendChild(div); } }); function sberpikirThumb(id) { var thumb = '<img src="https://i.ytimg.com/vi/ID/hqdefault.jpg">', play = '<div class="play"></div>'; return thumb.replace("ID", id) + play; } function sberpikirIframe() { var iframe = document.createElement("iframe"); var embed = "https://www.youtube.com/embed/ID?autoplay=1"; iframe.setAttribute("src", embed.replace("ID", this.dataset.id)); iframe.setAttribute("frameborder", "0"); iframe.setAttribute("allowfullscreen", "1"); this.parentNode.replaceChild(iframe, this); } </script> <?php } add_action('wp_footer','ytube_sc');
Kode PHP di atas berfungsi untuk memanggil script yang dibutuhkan untuk meng-embed video Youtube berdasarkan ID Video dengan bantuan shortcode ala WordPress.
3. Manfaatkan CSS
Di panel admin WordPress Anda, silakan masuk ke Appearance => Customize => Additional CSS dan tambahkan kode CSS berikut:
.youtube-player { position: relative; padding-bottom: 56.23%; /* Use 75% for 4:3 videos */ height: 0; overflow: hidden; max-width: 100%; background: #000; margin: 5px; } .youtube-player iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; background: transparent; } .youtube-player img { bottom: 0; display: block; left: 0; margin: auto; max-width: 100%; width: 100%; position: absolute; right: 0; top: 0; border: none; height: auto; cursor: pointer; -webkit-transition: .4s all; -moz-transition: .4s all; transition: .4s all; } .youtube-player img:hover { -webkit-filter: brightness(75%); } .youtube-player .play { height: 72px; width: 72px; left: 50%; top: 50%; margin-left: -36px; margin-top: -36px; position: absolute; background: url("//i.imgur.com/TxzC70f.png") no-repeat; cursor: pointer; }
Save Changes jika sudah.
4. Mulai Gunakan Shortcode Untuk Embed Video Youtube
Nah setelah semuanya selesai, maka Anda hanya perlu menggunakan shortcode berikut dan tempatkan di mana pun Anda ingin meng-embed video Youtube:
[youtube src="ID_VIDEO"]
Pastikan Anda menggantikan ID_VIDEO dengan ID Video Youtube yang ingin Anda embed. Contohnya adalah URL Youtube berikut:
A22oy8dFjqc
Maka ID Video-nya adalah: A22oy8dFjqc
Penutup
Itulah cara mempercepat loading video Youtube di blog. Ada berbagai cara, dan khususnya bagi pengguna WordPress, Anda bisa menggunakan metode shortcode bila tidak ingin selalu berurusan dengan kode HTML secara manual untuk meng-embed video Youtube.
Sumber:
seniberpikir.com
Posts
