Insert Video di Blogger Agar Responsive

 

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