Cara Memasang Video Youtube Pada Blog AMP Dengan AMP-IFRAME - gacerindo, untuk embed video youtube ke dalam blog itu sebenarnya sangatlah mudah. Tinggal ambil kodenya dari video langsung pastekan ke dalam blog atau artikel kamu.
Akan tetapi bagi blog yang mendukung amp itu tidak semudah begitu saja. Untuk memasang video youtube ke dalam blog AMP sebenarnya bisa dengan 2 cara yaitu menggunakan amp-youtube dan amp-iframe.
Mari kita bahas 2 langkah atau cara memasang video youtube ke dalam postingan blog agar valid amp
Memasang Video Youtube Pada Blog AMP Dengan AMP-YOUTUBE
Pertama agar embed video youtube valid amp, silahkan pastekan kode berikut antara kode <head> dan </head>. Kalau sudah ada lebih baik dibiarkan atau jangan di pastekan lagi. Kodenya dibawah ini.
<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
Selanjutnya, cari video youtube yang ingin di embed ke dalam blog. Contohnya dibawah ini.
https://www.youtube.com/watch?v=xojJechr0cw
Simpan atau salin ID video youtube kalian atau yang dikasih tanda diatas.
Silahkan tambahkan kode dibawah ini, dan ganti tanda xxxxxx dengan ID Video Youtube kalian.
<amp-youtube width="480"
height="270"
layout="responsive"
data-videoid="xxxxxxxxxxxx"
autoplay>
</amp-youtube>
Maka hasilnya akan seperti dibawah ini.
Memasang Video Youtube Pada Blog AMP Dengan AMP-IFRAME
Sebenarnya penerapannya hampir sama dengan amp-youtube, pertama pastekan kode dibawah ke dalam kode <head>. Bagi yang sudah ada lebih baik diabaikan saja. Kodenya dibawah ini.
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
Setelah menemukan kode ID Video youtube kalian. Silahkan pastekan kode berikut pada postingan blog dalam mode html.
<amp-iframe allowfullscreen='' frameborder='0' height='270' layout='responsive' sandbox='allow-scripts allow-same-origin allow-popups allow-presentation' src='https://www.youtube.com/embed/xxxxxxxxxxxx' width='480'>
<amp-img height='270' layout='fixed-height' noloading='' placeholder='' src='https://cdn.staticaly.com/img/1.bp.blogspot.com/-x1yVa6ztsWY/WyHFPLG0uLI/AAAAAAAAyIg/3C5Lb5EjGywOPzO_XSwK1XTu6VlBZE4SgCLcBGAs/s1600/back-iframe.png'></amp-img>
</amp-iframe>
Ganti tanda xxxxxx dengan ID video youtube yang ingin dipasang ke dalam blog. Contoh hasil diatas akan seperti dibawah ini.
Penutup
2 cara diatas cukup mudah untuk memasang video youtube ke dalam postingan blog amp. Tinggal kalian memilih mana yang dianggap paling mudah. Selamat mencoba dan semoga bermanfaat.
