Cara Embed / Menambahkan Video Youtube di Blog AMP dan Non AMP Lengkap

Penambahan atau embed video youtube kedalam sebuah artikel blog sangat membantu dan mempermudah pembaca untuk memahami penjelasan yang telah dibuat.
Gambar Cara Embed / Menambahkan Video Youtube di Blog AMP dan Non AMP Lengkap - Dokumen kinsta.com

Pada kesempatan ini saya ingin sharing tentang panduan bagaimana cara menambahkan atau embed video youtube ke laman konten artikel situs blog.

Penambahan atau embed video youtube kedalam sebuah artikel blog sangat membantu dan mempermudah pembaca untuk memahami penjelasan yang telah dibuat. Apalagi pada konten - konten yang berisi tentang panduan atau tutorial. Saya sendiri juga menggunakan embed video pada beberapa postingan artikel saya bisa dilihat disini contohnya: Cara Mendapatkan Uang dari Blog dengan Menjual Backlink

Selain mempermudah pembaca memahami isi konten sebuah blog video youtube juga disinyalir dapat meningkat status SEO blog itu sendiri, berikut adalah kelebihan menggunakan embed video pada laman artikel blog.

Kelebihan Menggunakan Embed Video di Laman Postingan Blog

Berikut beberapa kelebihan konten artikel blog yang memiliki konten video berdasarkan sumber informasi dari niagahoster dan comscore.

Mempermudah pembaca memahami isi konten
Seperti yang telah saya jelaskan sebelumnya bahwa penggunaan embed video dapat membantu mempermudah pembaca memahami isi konten blog terlebih pada konten yang memiliki muatan konten panduan atau tutorial.

Meningkatkan SEO pada Blog
Berdasarkan informasi dari Comscore, bahwa laman artikel blog yang memiliki video mimiliki peluang sebayak 53 kali lebih besar untuk muncul di halaman pertama hasil pencarian Google.

Meningkatkan Conversion
Selain mampu meningkatkan SEO video youtube juga mampu meningkatkan conversion. Dikutip dari Vidyard, bahwa halaman yang memiliki konten video lebih efektif untuk meningkatkan conversion.

Kemungkinan dishare ke medsos lebih tinggi
Berdasarkan informasi dari Marketing Institute bahwa konten video memiliki peluang 10 kali lebih besar untuk dishare ke medsos daripada konten yang tidak memiliki video.

Setelah anda memahami dan mengetahui fungsi embed video youtube, selanjutnya mari kita bahas cara mengaplikasikan ke situs blog di bawah ini.

Cara Memasang Embed Video Youtube di blog AMP

Pertama: silahkan masuk pada menu dashboard lalu pilih tema lalu pilih edit html kemudian cari kode </head>.

Kedua: silahkan salin kode javaacript di bawah ini dan tempelkan tepat diatas kode </head> namun, jika kode tersebut sudah sebelumnya silahkan abaikan dan lanjut pada langkah berikutnya.

<!-- JavaScript Google AMP -->
<script async='async' custom-element='amp-youtube' src='https://cdn.ampproject.org/v0/amp-youtube-0.1.js'/>

Ketiga: Silahkan anda salin kode embed video youtube AMP berikut ini pada laman html postingan, atau dimana tempat video mau ditampilkan.

<amp-youtube width='480' height='270' layout='responsive' data-videoid='xxxxxxxxxxx'></amp-youtube>
Jangan lupa untuk menganti kode video id berwarna orange dengan video id konten youtube yang akan ditampilkan pada laman youtube anda biasanya terletak diakhir url video youtube tersebut contohnya: youtube.com/watch?v=xxxxxxxxxxx Anda juga bisa membuatnya menjadi autopalay ketika halaman dilihat dan autopause ketika halaman discroll caranya cukup dengan menambahkan tag berikut ini autoplay='autoplay' tidak hanya itu ada layout tag lain yang bisa diterapkan disini adalah fill, fixed, fixed-height, nodisplay dan responsive info selanjutnya dapat dilihat disini: amp-youtube
<amp-youtube width='480' height='270' layout='responsive' data-videoid='xxxxxxxxxxx' autoplay='autoplay'></amp-youtube>

Cara Memasang Embed Video Youtube di blog Non - AMP

Ketika anda menambahkan / embed video youtube secara langsung ke dalam blog, maka yang akan terjadi adalah banyak script yang harus dieksekusi dan tentunya hal tersebut akan membuat performa kecepatan blog anda menurun, atas dasar itu saya tidak memberikan tutorial embed video youtube secara langsung melainkan melalui bantuan script lazy load youtube tujuannya tadi adalah untuk menjaga dan mempertahankan status performa situs blog. Kode script ini saya dapat dari Mas Muhammad Maki Oke, langsung disimak panduannya berikut ini:

Pertama: silahkan masuk pada menu dashboard lalu pilih tema lalu pilih edit html kemudian cari kode </style> atau ]]></b:skin>.

Kedua: silahkan salin kode css di bawah ini dan tempelkan tepat diatas kode </style> atau ]]></b:skin>.

/* Lazy Youtube */
.lazyYoutube{background-color:var(--highlight-bg);position:relative;overflow:hidden;padding-top:56.25%;border-radius:2px}
.lazyYoutube img{width:100%;top:-16.84%;left:0;opacity:.95}
.lazyYoutube img, .lazyYoutube iframe, .lazyYoutube .playBut{position:absolute}
.lazyYoutube iframe{height:100%;width:100%;top:0;left:0}
.lazyYoutube .playBut{top:50%;left:50%;transform:translate3d(-50%,-50%,0);-webkit-transition:all .5s ease;transition:all .5s ease}
.lazyYoutube .playBut{display:inline-block;width:70px;height:70px;z-index:1}
.lazyYoutube .playBut svg{width:inherit;height:inherit;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-width:7}
.lazyYoutube .playBut .circle{stroke:rgba(255,255,255,.75);stroke-dasharray:650;stroke-dashoffset:650;-webkit-transition:all .5s ease-in-out;transition:all .5s ease-in-out;opacity:.3}
.lazyYoutube .playBut .triangle{stroke:rgba(255,255,255,.75);stroke-dasharray:240;stroke-dashoffset:480;-webkit-transition:all .7s ease-in-out;transition:all .7s ease-in-out;transform:translateY(0);-webkit-transform:translateY(0)}
.lazyYoutube .playBut:hover .triangle{animation:nudge .7s ease-in-out;-webkit-animation:nudge .7s ease-in-out}
.lazyYoutube .playBut:hover .triangle, .lazyYoutube .playBut:hover .circle{stroke-dashoffset:0;opacity:1;stroke:var(--highlight-red)}

Ketiga: Silahkan anda cari kode </body> jika sudah ketemu silahkan anda salin script jquery di bawah ini tepat di atas kode </body>.

/* lazy youtube */
( function() {var youtube = document.querySelectorAll(".lazyYoutube"); for (var i = 0; i < youtube.length; i++) {var source = "https://img.youtube.com/vi/"+ youtube[i].dataset.embed +"/sddefault.jpg"; var image = new Image(); image.setAttribute("class", "lazy"); image.setAttribute("data-src",source); image.setAttribute("src","data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="); image.setAttribute("alt","Youtube video"); image.addEventListener( "load", function() {youtube[ i ].appendChild( image );}( i ) ); youtube[i].addEventListener( "click", function() {var iframe = document.createElement( "iframe" ); iframe.setAttribute( "frameborder", "0" ); iframe.setAttribute( "allowfullscreen", "" ); iframe.setAttribute( "src", "https://www.youtube.com/embed/"+ this.dataset.embed +"?rel=0&showinfo=0&autoplay=1" ); this.innerHTML = ""; this.appendChild( iframe ); }); }; })(); /*]]>*/</script>

Keempat: Klik save / simpan tema.

Sampai disini anda telah berhasil memasang script lazy load di situs blog anda, selanjutnya anda tinggal memasang pemanggilan script lazy load dan mengganti kode data-embed video berwarna orange di bawah ini dengan kode data-embed konten video youtube anda.

<!--[ Lazy youtube ]-->
<div class='lazyYoutube' data-embed='p5MY9CY5MOk'>
  <div class='playBut'>
    <svg class='svg-play' viewbox='0 0 213.7 213.7'><polygon class='triangle' points='73.5,62.5 148.5,105.8 73.5,149.1'></polygon><circle class='circle' cx='106.8' cy='106.8' r='103.3'></circle></svg>
  </div>
</div>

Diperbolehkan bagi anda yang ingin menyalin artikel yang ada diblog ini, dengan syarat mencantumkan sumbernya berupa link aktif yang merujuk pada konten aslinya. Blog anda tidak akan dihapus, deindex dan adsense anda tidak akan menerima keluhan hak cipta dari saya. Silahkan anda share artikel ini jika menurut anda bermanfaat. Terima kasih