Skip to main content

Modifikasi Tampilan Video Youtube Pada Blog AMP Dengan Tampilan Smartphone Frame

Modifikasi Tampilan Video Youtube Pada Blog AMP Dengan Tampilan Smartphone Frame - Selamat sore sobat blogger, pada sore ini saya akan coba posting tentang modifikasi tampilan video youtube pada blog AMP HTML.

Bagi Anda yang sudah menggunakan blog versi AMP, Anda bisa memodifikasi tampilan youtube pada postingan agar terlihat lebih menarik dan keren. Ini sangat cocok untuk Anda yang suka berbagi konten dengan video youtube lewat postingan blog.

Walaupun blog kita sudah valid AMP, namun kita juga bisa modifikasi amp-youtube dengan tampilan smartphone frame. Agar tampilan tidak biasa biasa saja. Jadi 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 jika Anda tertarik dan ingin mencobanya pada blog Anda, silahkan ikuti langkah-langkahnya berikut ini.

Silahkan simpan js amp-youtube berikut di atas </head>, jika 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>

Kemudian silahkan simpan amp-youtube berikut di bawah <body>; atau di atas </body>. Jika di template Anda sudah ada maka tidak perlu simpan kode 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 kode 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="" 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 saya tandai di atas.

Video ID Youtube itu seperti berikut ini, diambil dari URL video Youtube.


https://www.youtube.com/watch?v=SYjsnlHjPqs

Sumber: https://www.kompiajaib.com/2018/01/memodifikasi-amp-youtube-dengan.html.

You Might Also Like:

Buka Komentar