Modifikasi Tampilan Video Youtube Pada Blog AMP Dengan Tampilan Smartphone Frame - Selamat sore teman blogger, pada sore ini aku akan coba posting perihal modifikasi tampilan video youtube pada blog AMP HTML. Bagi Anda yang sudah memakai blog versi AMP, Anda dapat memodifikasi tampilan youtube pada postingan semoga terlihat lebih menarik dan keren. Ini sangat cocok untuk Anda yang suka menyebarkan konten dengan video youtube lewat postingan blog.
Walaupun blog kita sudah valid AMP, namun kita juga dapat modifikasi amp-youtube dengan tampilan smartphone frame. Agar tampilan tidak biasa biasa saja. Makara tidak kalah dengan blog yang non AMP.
Baca juga Memasukan Gambar, Video, Di Postingan Blog Valid AMP HTML
Untuk lebih jelasnya, silahkan lihat dan coba pada JSFiddle di bawah ini, modifikasi ini juga sudah responsive.
Nah kalau Anda tertarik dan ingin mencobanya pada blog Anda, silahkan ikuti langkah-langkahnya berikut ini.
Silahkan simpan js amp-youtube berikut di atas
</head>, kalau sudah ada maka tidak perlu disimpan lagi atau lewati langkah ini. <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>See Other Article
Kemudian silahkan simpan amp-youtube berikut di bawah
<body>; atau di atas </body>. Jika di template Anda sudah ada maka tidak perlu simpan instruksi ini lagi. <amp-youtube data-videoid='mGENRKrdoGY' height='270' layout='nodisplay' width='480'/>
Kemudian silahkan simpan CSS berikut ini pada style amp-custom blog AMP Anda.
.youtube-box{position:relative}
.youtube-frame{position:absolute;top:0;left:0;width:81%;height:81%;margin-left:9.4%;margin-top:4.4%;overflow:hidden;z-index:2;border-radius:8px}
.youtube-frame amp-youtube{width:100%;height:100%}
Kemudian untuk menampilkan video Youtube di postingan, silahkan gunakan instruksi berikut ini.
<div class="youtube-box">
<div class="youtube-frame">
<amp-youtube
data-videoid="SYjsnlHjPqs"
height="270"
layout="responsive"
width="480"
data-param-controls="0"
data-param-modestbranding="1"
data-param-autohide="1"
data-param-autoplay="0"
data-param-fs="0"
data-param-rel="0"
data-param-showinfo="0"
data-param-iv_load_policy="3"
data-param-enablejsapi="1"
data-param-widgetid="1"></amp-youtube>
</div>
<div class="youtube-framebox">
<amp-img alt="Modifikasi Tampilan Youtube Pada Blog AMP Dengan Tampilan Smartphone Frame Modifikasi Tampilan Video Youtube Pada Blog AMP Dengan Tampilan Smartphone Frame" width="900" height="456" src="https://lh3.googleusercontent.com/IQjewlt0MR3HL1DNSxCexulMuMrYkjO9CWazGlFlPVEOc2vD1ve4ZGr6EnDGqtk1OYSiPLBebbKnrF3GKIHLYA=v1-rw-w900" layout="responsive"></amp-img>
</div>
</div>
Anda tinggal menyesuaikan
data-videoid yang aku tandai di atas.Video ID Youtube itu ibarat berikut ini, diambil dari URL video Youtube.
https://www.youtube.com/watch?v=SYjsnlHjPqs
Sumber: https://xomlic.blogspot.com/search?q=memodifikasi-amp-youtube-dengan.
Share this Article
