Cara Memasang Video Youtube di Blog SEO Responsive dan User Friendly Dengan Lazy Load

Cara Memasang Video Youtube di Blog SEO Responsive dan User Friendly Dengan Lazy Load
Cara Memasang Script Embed Membuat Menempelkan Video Youtube di Blog SEO


Bagaimana Cara Memasang Memasukan Menampilkan Embed Video Youtube di Blog SEO Super Responsive dan User Friendly Dengan Lazy Load Video? Salah satu cara yang bisa kita lakukan untuk memanfaatkan video YouTube yang akan dipasang pada konten yang kita miliki Tentu saja itu juga merupakan salah satu strategi dan cara untuk mempromosikan video YouTube kita.

 Akan tetapi pada dasarnya mungkin anda sering menempelkan video dari YouTube ataupun dari channel Anda ke dalam website maupun blog secara langsung copy paste dari video YouTube tersebut sebenarnya ketika video tersebut di loading maka ada iframe yang akan ikut termuat juga sehingga akan memberatkan

 Kemudian untuk mengatasi hal tersebut sebenarnya caranya banyak salah satunya yaitu dengan bantuan lazy load java script dan tentu saja hal ini sangat bermanfaat sekali untuk performa website kita ketika video tersebut dimasukkan ke situs yang kita inginkan

 Oke tanpa basi lagi langsung saja disimak Bagaimana cara memasangkan atau memasukkan video YouTube pada postingan yang kita miliki agar responsif dan secara otomatis video tersebut menjadi user-friendly dan dan lebih ringan.

CARA PERTAMA

Cara Pasang Script

1. Langkah pertama silakan Anda copy-paste kode yang ada di bawah ini lalu buka TEMA > EDIT TEMA cari kode </body> CTRL+F untuk mempercepat pencarian lalu silakan Anda simpan di atas kode </body>

<!-- Script Mulai Video Youtube Responsive -->
<script>
//<![CDATA[
!function(){"use strict";for(var t=document.querySelectorAll(".llyv"),e=0;e<t.length;e++){var i=document.createElement("div");i.className="llyv-play-btn",t[e].appendChild(i),t[e].addEventListener("click",function(){var t=document.createElement("iframe");for(t.setAttribute("src","https://www.youtube.com/embed/"+this.dataset.id+"?rel=0&showinfo=0&autoplay=1"),t.setAttribute("frameborder","0"),t.setAttribute("allowfullscreen","");this.firstChild;)this.removeChild(this.firstChild);this.appendChild(t)})}}();
//]]>
</script>
<!-- Script Akhir Video Youtube Responsive -->
 

2. Kemudian untuk langkah selanjutnya silahkan anda copy paste kode yang ada di bawah ini lalu simpan berada di atas kode </b:skin> lalu simpan tema anda

<!-- CSS Mulai Video Youtube Responsive -->
/*! llyv.css v0.1.0 */ .llyv,.llyv .llyv-play-btn,.llyv img{cursor:pointer} .llyv{background-color:#000;margin-bottom:20px;position:relative;padding-top:56.25%;overflow:hidden} .llyv img{width:100%;top:-16.82%} .llyv .llyv-play-btn{width:100px;height:60px;background-color:#282828;z-index:1;border-radius:9px} .llyv .llyv-play-btn:before{content:"";border-style:solid;border-width:15px 0 13px 28px;border-color:transparent transparent transparent #fff} .llyv .llyv-play-btn:hover{background-color:red} .llyv .llyv-play-btn,.llyv .llyv-play-btn:before,.llyv iframe,.llyv img{position:absolute} .llyv iframe{height:100%;width:100%;top:0;left:0}.llyv .llyv-play-btn,.llyv .llyv-play-btn:before{top:50%;left:50%;transform:translate3d(-50%,-50%,0)}
<!-- CSS Akhir Video Youtube Responsive -->
 

Cara Pasang Video

Kemudian cara memasang videonya pada ada artikel yang kita inginkan ataupun pada halaman Posting yang kita inginkan caranya seperti dibawah ini

1. Copy-paste kode yang ada di bawah ini kemudian silakan Anda ubah id-video

<div class="llyv" data-id="id-video">
<img src="https://img.youtube.com/vi/id-video/hqdefault.jpg"/></div>

2. Copy URL video youtube Anda

https://www.youtube.com/watch?v=iwpRciPFBxc

3. Maka hasilnya kira-kira seperti di bawah ini

<div class="llyv" data-id="iwpRciPFBxc">
<img src="https://img.youtube.com/vi/iwpRciPFBxc/hqdefault.jpg"/></div>


CARA KEDUA

Cara Pasang Script

1. Sama seperti diatas TEMA > EDIT TEMA lalu cari kode </body> lalu simpan kode dibawah ini diatas kode tersebut

<!-- Script Mulai Video Youtube Responsive -->
<script> //<![CDATA[ /*! llyv.js v0.1.0 */ !function(){"use strict";for(var t=document.querySelectorAll(".llyv"),e=0;e<t.length;e++){var i=document.createElement("div");i.className="llyv-play-btn",t[e].appendChild(i);var l=document.createElement("img");l.src="https://img.youtube.com/vi/"+t[e].dataset.id+"/hqdefault.jpg",t[e].appendChild(l),t[e].addEventListener("click",function(){var t=document.createElement("iframe");for(t.setAttribute("src","https://www.youtube.com/embed/"+this.dataset.id+"?rel=0&showinfo=0&autoplay=1"),t.setAttribute("frameborder","0"),t.setAttribute("allowfullscreen","");this.firstChild;)this.removeChild(this.firstChild);this.appendChild(t)})}}(); //]]> </script>
<!-- Script Akhir Video Youtube Responsive -->
 

2. Lalu cari kode </b:skin> dan simpan kode dibawah ini tepat diatas kode tersebut

<!-- CSS Mulai Video Youtube Responsive -->
 /* * llyv.css
* Optimizing the performance while loading multiple YouTube videos on the same page
* @license MIT
* @version 0.1.0
* @author Wong, Wing Kam - @wingkwong
* @updated 2018-07-11
* @link https://github.com/wingkwong/lazy-load-youtube-videos
*/ .llyv,.llyv .llyv-play-btn,.llyv img{cursor:pointer} .llyv{background-color:#000;margin-bottom:30px;position:relative;padding-top:56.25%;overflow:hidden} .llyv img{width:100%;top:-16.82%} .llyv .llyv-play-btn{width:100px;height:60px;background-color:#282828;z-index:1;border-radius:9px} .llyv .llyv-play-btn:before{content:"";border-style:solid;border-width:15px 0 13px 28px;border-color:transparent transparent transparent #fff} .llyv .llyv-play-btn:hover{background-color:red} .llyv .llyv-play-btn,.llyv .llyv-play-btn:before,.llyv iframe,.llyv img{position:absolute} .llyv iframe{height:100%;width:100%;top:0;left:0} .llyv .llyv-play-btn,.llyv .llyv-play-btn:before{top:50%;left:50%;transform:translate3d(-50%,-50%,0)}
<!-- CSS Akhir Video Youtube Responsive -->
 

Cara Pasang Video

1. Copy-paste kode yang ada di bawah ini kemudian silakan Anda ubah id-video

<div class="llyv" data-id="id-video">

2. Copy URL video youtube Anda

https://www.youtube.com/watch?v=iwpRciPFBxc

2. Maka hasilnya kira-kira seperti di bawah ini

<div class="llyv" data-id="iwpRciPFBxc">

Hanya itu dulu saja apa yang bisa kami sampaikan tentang bagaimana cara memasang video YouTube di website dan blog agar responsif dan agar loadingnya cepat dan atas kunjungannya kami ucapkan terima kasih selamat mencobanya





Emoticon

Hallo!

Hi! Selamat datang di Jasa SEO Tasik. Silahkan beritahu apa yang bisa kami bantu dan kami akan menjawab pertanyaan Anda.

Support Customer Service 1
6285223124070
Sales Customer Service 2
6285323368870
Hubungi Kami di +6285223124070 dari Jam 08.00-17.00 WIB
Halo, ada yang bisa Kami bantu?
×
Ada yang bisa Kami bantu?