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