1. Untuk blog Non AMP
Silahkan tambahkan CSS di bawah ini pada template anda, Copy dan Paste pada bagian style blog Anda.
.video-responsive {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
margin:0;
width:100%
}
.video-responsive iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border:0;
}Selanjutnya gunakan kode di bawah ini untuk menampilkan videonya di dalam postingan.
<div class="video-responsive">
<iframe width="560" height="315" src="link video" frameborder="0" allowfullscreen=""></iframe>
</div>2. Untuk blog AMP
Silahkan pasang js amp-video dibawah ini pada template blog anda, jika sudah ada maka tidak perlu pasang lagi.
<script async='async' custom-element='amp-video' src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>Selanjutnya gunakan kode di bawah ini untuk menampilkan videonya di dalam postingan blog anda.
<amp-iframe allowfullscreen='' frameborder='0' height='270' layout='responsive' sandbox='allow-scripts allow-same-origin allow-popups allow-presentation' allow='autoplay; encrypted-media' src='Link Video' width='480'>
<amp-img height='270' layout='fixed-height' noloading='' placeholder='' src='https://cdn.staticaly.com/img/1.bp.blogspot.com/-x1yVa6ztsWY/WyHFPLG0uLI/AAAAAAAAyIg/3C5Lb5EjGywOPzO_XSwK1XTu6VlBZE4SgCLcBGAs/s1600/back-iframe.png'></amp-img>
</amp-iframe>Selamat Mencoba
Tidak ada komentar