Cara Memasang Video Youtube Pada Blog Tanpa Memberatkan Halaman

Untuk memasang video youtube pada halaman blog bahwasanya sangatlah mudah, namun bila tidak tau caranya maka sanggup besar lengan berkuasa terhadap kecepatan loading halaman blog, loading halaman blog akan menjadi berat dikala diakses, dikarenakan dikala halaman terbuka video pribadi melaksanakan download secara otomatis, yang kedua yaitu video yang terpasang di halaman blog tidak responsive, artinya, dikala halaman blog di terusan melalui perangkat mobile, ukuran video tidak sanggup menyesuaikan dengan lebar halaman, ini tentu akan menjadi masalah.

Oleh sebab itu yang harus diperhatikan dikala memasang video di halaman blog yaitu bagaimana caranya biar video sanggup tampil responsive dan tidak mempengaruhi loading halaman yang semakin berat, halaman blog harus mempu hanya menampilkan tubnailnya saja, video gres mengunduh file yang dibutukan dikala video tersebut dijalankan untuk ditonton.

Untuk memasang video youtube pada halaman blog bahwasanya sangatlah gampang Cara Memasang Video youtube pada blog tanpa memberatkan halaman


Memang ada aneka macam blog-blog yang membahas mengenai bagaimana cara memasang youtube video pada halaman blog, namun yang terbaik yaitu bagaimana cara memasang youtube video pada blog biar sanggup tampil responsive dan tidak memperlambat loading halaman blog.

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

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

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

Cara ini yaitu cara yang sangat mudah dan baik sebab tidak akan terlalu membebani halaman blog dan halaman blog akan tetap ringan dikala diakses.

Cara Memasang video youtube pada blog

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

1. Memasang video dengan aba-aba IFrame.

Untuk memasang video youtube pada blog biasanya memakai cara standar yang sudah sering digunakan, cara ini intinya memakai script khusus tapi memakai aba-aba iframe yang sanggup kita atur ukuran lebar dan tingginya, aba-aba di bawah ini yaitu aba-aba 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 aba-aba diatas sempurna di potongan dimana video akan ditampilkan, kemudian ganti VIDEO_ID dengan video id yang akan ditampilkan.

Sayangnya aba-aba di atas mempunyai banyak kelemahan, itu dikarenakan video di atas memakai iframe, sehingga  selain jelek dimata seo  video yang dipasang tidak akan responsive dan sanggup menyebabkan bertambahnya ukuran halaman blog, tentu kurang baik sebab semakin besar kapasitas halaman maka sanggup mempengaruhi loading halaman blog menjadi lebih berat.

2. Memasang Video tanpa IFrame (Disarankan)

Alternatif kedua yaitu alternatif yang sangat direkomendasikan untuk anda gunakan, cara in memakai aba-aba HTML tanpa IFrameyang dimanipulasi dengan javascript dan aba-aba css. Untuk setiap video yang ditambahkan cukup memakai aba-aba menyerupai di bawah ini:
<div class="youtube-player" data-id="VIDEO_ID"></div>

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

Cara memasang video tanpa iframe yaitu sebagai berikut:

a. Masuk ke blog anda, kemudian di bilah hidangan sisi kiri pilih hidangan tempate > edit HTML

b. Cari aba-aba </head kemudian kopikan script di bawah ini sebelum aba-aba head, atau cari aba-aba </html kemudian letakan aba-aba 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 aba-aba </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 aba-aba di bawah ini, di potongan yang kira-kira video anda ingin diletakan:
<div class="youtube-player" data-id="VIDEO_ID"></div>
VIDEO_ID sanggup diganti dengan video_id yang ingin anda tampilkan.

Cara di atas menciptakan halaman yang berisi konten video lebih ringan sebab video yang ditampiklan hanyalah thumbnail videonya saja, proses download video gres berjalan bila pengunjung menonton video tersebut.

Untuk demo silahkan buka link demo ini

Subscribe to receive free email updates:

0 Response to "Cara Memasang Video Youtube Pada Blog Tanpa Memberatkan Halaman"

Posting Komentar