Cara Memasang Video youtube pada blog tanpa memberatkan halaman

Untuk memasang video youtube pada halaman blog bekerjsama sangatlah mudah, namun jikalau tidak tau caranya maka mampu besar lengan berkuasa terhadap kecepatan loading halaman blog, loading halaman blog akan menjadi berat saat diakses, dikarenakan saat halaman terbuka video eksklusif melaksanakan unduh secara otomatis, yang kedua yaitu video yang terpasang di halaman blog tidak responsive, artinya, saat halaman blog di jalan masuk melalui perangkat mobile, ukuran video tidak dapat menyesuaikan dengan lebar halaman, ini tentu akan menjadi masalah.

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

Memang ada berbagai 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 mampu 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 mensugesti loading halaman blog.

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

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

Cara ini yaitu cara yang sangat praktis dan baik alasannya tidak akan terlalu membebani halaman blog dan halaman blog akan tetap ringan saat 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 arahan IFrame.

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

Sayangnya arahan 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 mengakibatkan bertambahnya ukuran halaman blog, tentu kurang baik alasannya semakin besar kapasitas halaman maka dapat mensugesti loading halaman blog menjadi lebih berat.

2. Memasang Video tanpa IFrame (Disarankan)

Alternatif kedua yaitu alternatif yang sangat direkomendasikan untuk anda gunakan, cara in menggunakan arahan HTML tanpa IFrameyang dimanipulasi dengan javascript dan arahan css. Untuk setiap video yang ditambahkan cukup menggunakan arahan menyerupai di bawah ini:

<div class="youtube-player" data-id="VIDEO_ID"></div>

Jika video yang ingin dipasang di halaman blog lebih dari satu arahan 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 menu sisi kiri pilih menu tempate > edit HTML

b. Cari arahan </head kemudian kopikan script di bawah ini sebelum arahan head, atau cari arahan </html kemudian letakan arahan di bawah ini di atasnya

 
<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 = videoThumb(v[n].dataset.id);
 
                div.onclick = videoIframe;
 
                v[n].appendChild(div);
 
            }
 
        });
 
  
 
    function videoThumb(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 videoIframe() {
 
        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>
 
 

 c. Letakan juga di atas arahan </head script css di bawah ini:

 
<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>
 
 

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 arahan di bawah ini, di bab yang kira-kira video anda ingin diletakan:

<div class="youtube-player" data-id="VIDEO_ID"></div>

VIDEO_ID mampu diganti dengan video_id yang ingin anda tampilkan.

Cara di atas membuat halaman yang berisi konten video lebih ringan alasannya video yang ditampiklan hanyalah thumbnail videonya saja, proses unduh video gres berjalan jikalau pengunjung menonton video tersebut.

Untuk demo silahkan buka link demo ini

Tweet