Perubahan besar - besaran pada semua struktur pengkodean dalam desain sebuah website, sejak Google membuat aturan, dessain website harus mengikuti kode yang dibuat oleh Google, yang diklaim resfonsive mobile, yang mereka sebut AMP yaitu Acceleration Mobile Page. Termasuk dalam penambahan sebuah video youtube pada halaman website.
Sebelumnya dalam penambahan video youtube di halaman website, cukup dengan menambahkan kode iframe, sekarang mau tidak mau harus menggunakan struktur kode amp, agar dapat di index di penelusuran Google. Untuk membuat struktur Amp Youtube, Google membuat dua model yang bisa dibuat di halaman website.
1. Model AMP iframe
Untuk model ini, pertama tambahkan kode javascript di bawah ini, di bawah <Head>;
<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
Kemudian tambahkan kode dibawah ini dimana saja yang ingin Anda letakkan, di bawah <body>;
<amp-iframe width="500" height="310"
sandbox="allow-scripts allow-same-origin"
layout="responsive"
frameborder="0"
src="https://www.youtube.com/embed/Kode_id_video">
</amp-iframe>
Ukuran lebar dan panjang dapat disesuaikan display, dan kode_id_video, ganti dengn kode id video youtube yang ingin ditanyangkan di halaman website
2. Model AMP youtube
Untuk model ini, pertama tambahkan kode javascript di bawah ini, di bawah <Head>;
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
Kemudian tambahkan kode dibawah ini dimana saja yang ingin Anda letakkan, di bawah <body>;
<amp-youtube
data-videoid="kode_id_video"
layout="responsive"
width="500" height="310"></amp-youtube>
Ukuran lebar dan panjang dapat disesuaikan display, dan kode_id_video, ganti dengn kode id video youtube yang ingin ditanyangkan di halaman website
Pada struktur lama masih dapat Anda gunakan, Anda dapat menggunakan kode di bawah ini, di bawah </Head>;
<script>
//<![CDATA[
$(document).ready(function() {
$('iframe[src*="youtube.com"]').wrap('<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;margin:0 auto;width:100%"></div>');
$('iframe[src*="youtube.com"]').css({
"position": "absolute",
"top": "0",
"left": "0",
"width": "100%",
"height": "100%",
"border": "0"
});
$('iframe[src*="youtube.com"]').each(function() {
$(this).attr("data-src", $(this).attr("src"));
$(this).attr("src", "")
});
});
function init() {
var vidDefer = document.getElementsByTagName('iframe');
for (var i = 0; i < vidDefer.length; i++) {
if (vidDefer[i].getAttribute('data-src')) {
vidDefer[i].setAttribute('src', vidDefer[i].getAttribute('data-src'));
}
}
}
window.onload = init;
//]]>
Kemudian simpan kode di bawah ini di bawah, <body>;
<iframe width="560" height="315" src="https://www.youtube.com/embed/kode_id_video" frameborder="0" allowfullscreen="" data-src="https://www.youtube.com/embed/kode_id_video" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: 0px;"></iframe>
Demikan cara menambahkan membuat AMP Video Youtube.
Semoga bermanfaat.
No comments:
Post a Comment