Thursday, November 17, 2016

cara memasang video youtube di blog tanpa bikin lemot

Selamat datang teman-teman di blog teknologikekinian.com, kali ini saya akan membahas tentang cara memasang video youtube di blog, Untuk memasang video youtube pada halaman blog sebenarnya sangatlah mudah, namun jika tidak tau caranya maka bisa berpengaruh terhadap kecepatan loading halaman blog, loading halaman blog akan menjadi berat ketika diakses, dikarenakan ketika halaman terbuka video langsung melakukan download secara otomatis, yang kedua adalah video yang terpasang di halaman blog tidak responsive, artinya, ketika halaman blog di akses melalui perangkat mobile, ukuran video tidak dapat menyesuaikan dengan lebar halaman, ini tentu akan menjadi masalah.

Oleh karena itu yang harus diperhatikan ketika memasang video di halaman blog adalah bagaimana caranya agar video bisa tampil responsive dan tidak mempengaruhi loading halaman yang semakin berat, halaman blog harus mempu hanya menampilkan tubnailnya saja, video baru mengunduh file yang dibutukan ketika video tersebut dijalankan untuk ditonton.
memasang video youtube di blog

Memang ada banyak sekali blog-blog yang membahas mengenai bagaimana cara memasang youtube video pada halaman blog, namun yang terbaik adalah bagaimana cara memasang youtube video pada blog agar bisa tampil responsive dan tidak memperlambat loading halaman blog.

Di artikel kali ini saya akan jelaskan bagaimana cara memasang youtube video di halaman blog berflatform blogspot dengan ukuran responsive dan tidak mempengaruhi loading halaman blog.

baca juga : youtube tanpa buffering

Ternyata Video youtube dapat dipasang pada halaman blog tanpa memberatkan halaman dan Responsive



Google sendiri sebenarnya menyediakan cara terbaik untuk memasang video pada halaman blog, sehingga ketika video terpasang, yang tampil pertama kali hanyalah tubnail videonya saja yang kapasitasnya mungkin hanya sebesar 15 kb saja, video baru mengunduh ketika pengunjung
mengklik untuk menjalankan video tersebut.

Cara ini adalah cara yang sangat praktis dan baik karena tidak akan terlalu membebani halaman blog dan halaman blog akan tetap ringan ketika diakses.

baca juga: cara download video dari youtube semua format

Cara Memasang video youtube pada blog


Ada 2 cara yang akan saya uraikan di artikel kali ini bagaimana cara menyematkan video pada halaman blog, sebagai berikut:

1. Memasang video dengan kode IFrame.


Untuk memasang video youtube pada blog biasanya menggunakan cara standar yang sudah sering digunakan, cara ini pada dasarnya menggunakan script khusus tapi menggunakan kode iframe yang bisa kita atur ukuran lebar dan tingginya, kode di bawah ini adalah kode IFrame untuk menyematkan video pada blog.
<iframe width=’600’ height=’480’ src=”http://www.youtube.com/embed/VIDEO_ID></iFrame>

Untuk membuatnya cukup sederhana pada editor blog, silahkan beralih ke mode HTML dan kopi kode diatas tepat di bagian dimana video akan ditampilkan, kemudian ganti VIDEO_ID dengan video id yang akan ditampilkan.

Sayangnya kode di atas memiliki banyak kelemahan, itu dikarenakan video di atas menggunakan iframe, sehingga selain buruk dimata seo video yang dipasang tidak akan responsive dan dapat menyebabkan bertambahnya ukuran halaman blog, tentu kurang baik karena semakin besar kapasitas halaman maka dapat mempengaruhi loading halaman blog menjadi lebih berat.

2. Memasang Video tanpa IFrame (Disarankan)


Alternatif kedua adalah alternatif yang sangat direkomendasikan untuk anda gunakan, cara ini menggunakan kode HTML tanpa IFrame yang dimanipulasi dengan javascript dan kode css. Untuk setiap video yang ditambahkan cukup menggunakan kode seperti di bawah ini:
<div class="youtube-player" data-id="VIDEO_ID"></div>

Jika video yang ingin dipasang di halaman blog lebih dari satu kode tersebut bias ditambahkan lebih dari satu sesuai dengan video yang ingin dipasang.

Cara memasang video tanpa iframe adalah sebagai berikut:
a. Masuk ke blog anda, kemudian di bilah menu sisi kiri pilih menu tempate > edit HTML

b. Cari kode </head kemudian kopikan script di bawah ini sebelum kode head, atau cari kode </html kemudian letakan kode di bawah ini di atasnya
  1. <script>
  2. document.addEventListener("DOMContentLoaded",
  3. function() {
  4. var div, n,
  5. v = document.getElementsByClassName("youtube-player");
  6. for (n = 0; n < v.length; n++) {
  7. div = document.createElement("div");
  8. div.setAttribute("data-id", v[n].dataset.id);
  9. div.innerHTML = videoThumb(v[n].dataset.id);
  10. div.onclick = videoIframe;
  11. v[n].appendChild(div);
  12. }
  13. });
  14.  
  15. function videoThumb(id) {
  16. var thumb = '<img src="https://i.ytimg.com/vi/ID/hqdefault.jpg">',
  17. play = '<div class="play"></div>';
  18. return thumb.replace("ID", id) + play;
  19. }
  20. function videoIframe() {
  21. var iframe = document.createElement("iframe");
  22. var embed = "https://www.youtube.com/embed/ID?autoplay=1";
  23. iframe.setAttribute("src", embed.replace("ID", this.dataset.id));
  24. iframe.setAttribute("frameborder", "0");
  25. iframe.setAttribute("allowfullscreen", "1");
  26. this.parentNode.replaceChild(iframe, this);
  27. }
  28.  
  29. </script>
 c. Letakan juga di atas kode </head script css di bawah ini:
  1. <style>
  2. .youtube-player {
  3. position: relative;
  4. padding-bottom: 56.23%;
  5. /* Use 75% for 4:3 videos */
  6. height: 0;
  7. overflow: hidden;
  8. max-width: 100%;
  9. background: #000;
  10. margin: 5px;
  11. }
  12. .youtube-player iframe {
  13. position: absolute;
  14. top: 0;
  15. left: 0;
  16. width: 100%;
  17. height: 100%;
  18. z-index: 100;
  19. background: transparent;
  20. }
  21. .youtube-player img {
  22. bottom: 0;
  23. display: block;
  24. left: 0;
  25. margin: auto;
  26. max-width: 100%;
  27. width: 100%;
  28. position: absolute;
  29. right: 0;
  30. top: 0;
  31. border: none;
  32. height: auto;
  33. cursor: pointer;
  34. -webkit-transition: .4s all;
  35. -moz-transition: .4s all;
  36. transition: .4s all;
  37. }
  38. .youtube-player img:hover {
  39. -webkit-filter: brightness(75%);
  40. }
  41. .youtube-player .play {
  42. height: 72px;
  43. width: 72px;
  44. left: 50%;
  45. top: 50%;
  46. margin-left: -36px;
  47. margin-top: -36px;
  48. position: absolute;
  49. background: url("//i.imgur.com/TxzC70f.png") no-repeat;
  50. cursor: pointer;
  51. }
  52.  
  53. </style>
d. Simpan template blog anda.

f. Jika anda ingin menyematkan video di halaman blog anda, maka di editor postingan, masuk ke mode html, kemudian letakan kode di bawah ini, di bagian yang kira-kira video anda ingin diletakan:
<div class="youtube-player" data-id="VIDEO_ID"></div>
VIDEO_ID bisa diganti dengan video_id yang ingin anda tampilkan.

Cara di atas membuat halaman yang berisi konten video lebih ringan karena video yang ditampiklan hanyalah thumbnail videonya saja, proses download video baru berjalan jika pengunjung menonton video tersebut.

Paket Belajar Bisnis Online - Merubah Internet Menjadi Mesin Uang

Bikin website mudah

Itulah sekilas ilmu dari saya semoga bermanfaat dan dapat menambah wawasan kalian semua. jangan bosen-bosen mampir keblog teknologikekinian.com karena sering baca disini makin banyak ilmu. jika ada pertanyaan silahkan tinggalkan komentar.
Terimakasih.

Bagikan

Jangan lewatkan

cara memasang video youtube di blog tanpa bikin lemot
4/ 5
Oleh

Subscribe via email

Suka dengan artikel di atas? Tambahkan email Anda untuk berlangganan.