✔ Tutorial Embed Youtube Di Amp Blogger, Lengkap Dengan Parameter
Tutorial Cara Embed Video Youtube di AMP Blogger, Lengkap dengan Parameter Youtube
Youtube merupakan salah satu platform video terbesar dan paling banyak dipakai oleh para pengguna internet. Milyaran video sudah diunggah oleh para pengguna YouTube.
Selain ditayangkan di website YouTube, video-video YouTube juga sanggup ditayangkan di sebuah halaman website dengan cara memasukan isyarat embed video YouTube. Biasanya isyarat embed default YouTube akan menyerupai ini:
<iframe width="560" height="315"
src="https://www.youtube.com/embed/lBTCB7yLs8Y"
Baca Juga
frameborder="0" allow="autoplay; encrypted-media"
allowfullscreen>
</iframe>
Namun, bila anda mempunyai website berbasis AMP HTML, tentunya isyarat tersebut tidak sanggup diterima oleh AMP dan menciptakan halaman anda error. Diperlukan beberapa perubahan isyarat default menjadi isyarat berbasis AMP.
Anda hanya perlu mengambil ID video Youtube dan mencopy-nya ke dalam code yang sudah disediakan oleh AMP Project.
Tapi sebelumnya, Anda perlu memasukan j4vascript amp-youtube berikut ini diantara isyarat
Contoh isyarat embed vide Youtube supaya valid AMP yaitu menyerupai di bawah ini:
Dan alhasil menyerupai di bawah ini: Anda hanya perlu mengambil ID video Youtube dan mencopy-nya ke dalam code yang sudah disediakan oleh AMP Project.
Tapi sebelumnya, Anda perlu memasukan j4vascript amp-youtube berikut ini diantara isyarat
<head> </head> .<script async='async' custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>Contoh isyarat embed vide Youtube supaya valid AMP yaitu menyerupai di bawah ini:
<amp-youtube
data-videoid="lBTCB7yLs8Y"
layout="responsive"
width="480" height="270">
</amp-youtube>
Tanda berwarna kuning yaitu ID video YouTube yang akan anda embed di halaman website, di mana anda sanggup mendapat ID video tersebut di URL video YouTube. Contoh url: https://www.youtube.com/watch?v=lBTCB7yLs8Y
Menambahkan Parameter YouTube di AMP HTML Blogger
Dengan menambahkan parameter ke URL IFrame, Anda sanggup menyesuaikan pengalaman pemutaran dalam aplikasi Anda.Misalnya, Anda sanggup secara otomatis memutar video memakai parameter autoplay atau menjadikan video diputar berulang kali memakai parameter loop.
Di halaman AMP, ada beberapa parameter YouTube yang sanggup anda tambahkan kedalam isyarat embed AMP Youtube. Caranya dengan menambah isyarat
data-param-* (kecuali parameter autoplay)dilanjutkan dengan nama parameter. Contohnya, data-param-controls, yang berfungsi menghilangkan button kontrol ketika video sedang di tonton.Saya akan coba jelaskan beberapa parameter yang sanggup anda tambahkan pada halaman AMP, isyarat ini juga support di Template Blogger valid AMP.
AMP Youtube - Autoplay
Dengan menambakan parameter autoplay, maka video akan terputar otomatis ketika pengguna mengunjungi halamn web anda. Contoh isyarat embed AMP Youtube dengan autoplay menyerupai di bawah ini:
<amp-youtube
data-videoid="lBTCB7yLs8Y"
layout="responsive"
width="480" height="270"
autoplay='1'>
</amp-youtube> Jika atribut autoplay ini ada, dan browser mendukung pemutaran otomatis, maka:
- suara video secara otomatis mute sebelum autoplay dimulai.
- saat video digulir keluar dari tampilan, video dijeda.
- saat video diputar ke tampilan, video melanjutkan pemutaran.
- ketika pengguna mengetuk video, video tersebut disuarakan.
AMP Youtube - Controls
Dengan menambakan parameter controls, maka video yang diputar tidak akan menampilkan button control Youtube menyerupai next video, fullscreen, setting, caption dan lainnya. Contoh isyarat embed AMP Youtube dengan disable controls menyerupai di bawah ini:
<amp-youtube
data-videoid="lBTCB7yLs8Y"
layout="responsive"
width="480" height="270"
data-param-controls='0'>
</amp-youtube>Hasil:
AMP Youtube - ShowInfo
Dengan menambakan parameter showinfo, maka video yang diputar tidak akan menampilkan judul video Youtube. Contoh isyarat embed AMP Youtube dengan disable controls seperti di bawah ini:
<amp-youtube
data-videoid="lBTCB7yLs8Y"
layout="responsive"
width="480" height="270"
data-param-showinfo='0'>
</amp-youtube> Hasil:
AMP Youtube - Rel
Dengan menambakan parameter rel, maka video yang diputar tidak akan menampilkan related video di final video. Contoh isyarat embed AMP Youtube dengan disable controls seperti di bawah ini:
<amp-youtube
data-videoid="lBTCB7yLs8Y"
layout="responsive"
width="480" height="270"
data-param-rel='0'>
</amp-youtube>Hasil:
Anda juga sanggup menggabungkan ketiga parameter tersebut di dalam satu isyarat embed video youtube. Hasilnya dari penggabungan antara parameter rel, controls, dan showinfo, yaitu menyerupai ini:
Sebenarnya ada beberapa parameter video youtube yang sanggup anda terapkan, silahkan kunjungi YouTube player parameter.
Untuk lebih lengkapnya mengenai amp-youtube, silahkan kunjungi link ini.
Kode CSS amp-youtube Responsive
Saya akan beri pola CSS untuk amp-youtube supaya responsive. Silahkan copy CSS ini isyarat setelah &<style amp-custom='amp-custom'> pada template blogger AMP anda. Dan panggil selector dengan <div class='videoyoutube'>:.videoyoutube{text-align:center;margin:auto;width:100%;}Semoga bermanfaat. Bila ada pertanyaan, silahkan ejekan di kolom komentar artikel ini.
Sumber http://ampidn.blogspot.com
0 Response to "✔ Tutorial Embed Youtube Di Amp Blogger, Lengkap Dengan Parameter"
Posting Komentar