Skip to main content
Mister Design

follow us

Choose Your Categories

Redesign by BUNG MADAF

Memasang Video Youtube di Postingan Blog AMP HTML

Bagi Anda yang bingung dengan bagaimana cara memasang vidio Youtube di AMP, postingan ini adalah solusi untuk menyelesaikannya. Karena pada artikel ini Anda akan diberitahukan cara memasang Video Youtube di postingan blog AMP HTML.

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 &lt;/head&gt;&lt;!--<head/>--&gt;

<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.

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar