Perlu Anda ketahui, template HTML5 dengan AMP sangatlah jauh berbeda, karena pada postingan AMP tidak boleh menaruh kode atau script seperti Javascript, CSS, dan lainnya. Jika Anda masih merasa bingung dengan cara mengecek valid atau tidak validnya postingan tersebut AMP, Anda bisa memasang Extensions AMP Validator pada Browser Chrome Anda.
Pada tutorial ini saya akan membagikan 2 (dua) sekaligus cara memasang vidio Youtube di AMP. Yaitu memasang pada bagian heading atau panel gambar utama dan di dalam postingan.
Memasang Video Youtube Untuk Heading atau Panel Utama
Yang di maksud dengan heading/panel utama iyalah gambar utama yang bisa Anda lihat pada artikel ini di atas judulnya. Nah itulah yang dimaksud dengan panel utama. Silakan Anda terapkan kode dibawah ini ke dalam postingan Anda pada
mode HTML
bukan Compose
.<amp-youtube
data-videoid="OnfYLBNvrPw"
height="270"
layout="responsive"
width="480">
</amp-youtube>
Memasang Video Youtube Untuk di Dalam Postingan
Dan jika Anda ingin memasang di bagian dalam postingan, maka Anda pakai kode dibawah ini.
<amp-iframe
frameborder="0"
height="200"
src="https://www.youtube.com/embed/VERzpO--MAw"
width="300"
sandbox="allow-forms allow-scripts allow-same-origin allow-modals allow-popups"
layout="responsive"
</amp-iframe>
Silakan ganti tulisan yang di tandai dengan URL vidio Youtube Anda.
Info Tambahan
Jika Anda blum memasang element AMP Iframe, silakan Anda pasang dengan cara taruh kode dibawah ini di atas
</head>
atau </head><!--<head/>-->
<script async='async' custom-element='amp-iframe' src='https://cdn.ampproject.org/v0/amp-iframe-0.1.js'></script>
<script async='async' custom-element='amp-youtube' src='https://cdn.ampproject.org/v0/amp-youtube-0.1.js'></script>
Jika mengalami masalah dalam tutorial yang saya buat, silakan Anda berkomentar dibawah, dan nanti saya akan koreksi kembali. Terima kasih telah berkunjung semoga bermanfaat bagi Anda tutorial Memasang video Youtube ini.
0 Comments