Cara Membuat Video Embed Youtube Menjadi Responsive di Blog

masnasih.com - Bismillah. Di posingan ini saya ingin berbagi tentang cara membuat video embed youtube menjadi responsive di blog. Sudah menjadi rahasia umum kalau iframe dari youtube tidak responsive. Lebih tepatnya lagi memang iframe itu tidak responsive. Maka ada cara tertentu yang bisa dilakukan agar masalah itu bisa teratasi dan video yang tidak responsove menjadi responsive menyesuaikan ukuran perangkat. Nah caranya gimana? ikuti tutorial berikut ini.

Cara Membuat Video Embed Youtube Menjadi Responsive di Blog

Kita menggunakan tag div sebagai pembungkus dari iframe. Seperti ini :

<div class="responsiveyoutube">
    <!-- di bawah ini adalah kode asli dari youtube -->
    <iframe width="560" height="315" src="https://www.youtube.com/embed/B5ps-JQazts" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

Nah div dengan class responsiveyoutube tersebut yang dijadikan pembungkusnya. Kemudian di lengkapi dengan css berikut ini untuk membuat iframe menjadi responsive.

.responsiveyoutube {
 position: relative;
 padding-bottom: 56.25%; /* 16:9 */
 padding-top: 25px;
 height: 0;
}
.responsiveyoutube iframe {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}

DEMO




Demikianlah Artikel cara mereponsivekan video embed youtube. Semoga Bermanfaat.