Cara agar iframe bootstrap jadul lama menjadi responsive.

Solusi agar bootstrap lama dengan iframe tag mu masih bisa digunakan di bootstrap versi terbaru , anti ribet pakai cara ini.

blog · 23 Jun 2023

#bootstrap #cara #iframe #responsive

Yes… you know lah…. masalah ketika menggunakan bootstrap dan framework css lain nya akan muncul ketika mereka melakukan update version.

Mengapa ini terjadi ?? kadang ada pembaharuan yang nantinya akan mengganti beberapa element , dan bahkan dengan class yang baru misalnya, untuk kasus ini kita akan ngebahas bootstrap !!

Era bootstrap saya kenal ketika masih version 2 kala itu, mempelajari nya dengan seksama hingga saat ini eh malah jadih nagihi… alasan lain kenapa lebih memilih bootstrap ya tentunya karna kelengkapan nya itu gaess…. yes i know lah kalau ada tailwind css juga yang muncul dan jadi populer di para developer, dan… kalau opini saya sih.. karna mungkin lebih familiar dengan bootstrap dan ukuran nya yang lebih kecil maka perasaan gua enakan makai bootstrap kok, awokwokwok….. bahkan beberapa project juga kita bootstrapin aja , why not !! pertama ngebantu banget proses build dan development project apapun, makin kesini makin nambah versi makin lengkap dan ringan, untuk kebutuhan web development ini sangat dibutuhkan mengingat sekarang pelanggan website kita pada cerewet bos.. ya bukan tanpa sebab karna hal yang utama dan point penting bagi mereka adalah bagaimana hasil dari uji coba google lighthouse sendiri untuk peforma situs , dan sekali lagi inilah pada akhirnya kita tetap setia menggunakan bootstrap.

So apapun project nya pasti selalu deh ada si doi, terus…. kembali ke permasalahan untuk proses update version nya. seperti kita ketahui ketika kalian melakukan update versi dari mulai versi 1,2,3,4, hingga 5 versi terakhir saat ini , ketika post ini dibuat, kesulitan utama kalian adalah pada umumnya dengan berbagai class. seperti halnya modal, slider , navigiasi dan lain lain deh banyak… sekedar tips aja yes.. untuk class yang saya sebutin di atas itu , rasanya musti manual , agar mendapatkan optimasi nya.

Sekarang mengenai image dan iframe nah disini kalian update dari versi berapapun akan sangat sangat terganggu, mengingat website dan blog kita misalnya banyak banget tuh.. assets iframe dan image yang tentunya berjibun !!

Versi lawas umumnya menggunakan img-responsive di versi baru makai img-fluid , terus pada iframe katakanlah di versi 4 kita nemuin embed-responsive-16by9 di vesi terbaru kalian pasti ngegunain ratio-16x9.

Nah ini loh yang jadi penyebab kenapa beberapa post page article kamu khusus nya pada assets image dan video iframe tidak responsive banget !! mau ubah satu persatu ??? gile lu ndro… bayangin kalao kalian punya 1000 post , masak iya ubah semua gitu ?? capek boss…. gak bahaya ta……

Don’t worry be happy my friend… karna kita ada sedikit tips nih, untuk ngatasin masalah responsive image dan iframe ?? gimana caranya ngab ??

Pertama sediakan kopi, santai sejenak , dan jernihkan pikiran mu , hisap pelan pelan rokokmu…. 😁 Anjay….. apaan nih ngab…

Ya solusi terbaik agar gambar dan video kalian menjadi baik baik aja , adalah dengan menggunakan css untuk manipulasinya dan merubah tampilan menjadi lebih responsive baik via mobile dan desktop akses.

Cara cepet nya kasih aja langsung ke template kamu ya.. jadi kita bisa buat themes baru untuk post blog page artikel lama misalnya, atau kalau kamu cuma buat satu tema aja ya tinggal sisipkan aja kode nya ke template kamu.

untuk gambar kita bisa siapkan kode berikut ini deh, kamu copy aja ya dan sisipkan di bawah atau diatas tag </head> bisa juga di dalam tag <body> juga bisa… kode untuk gambar agar menjadi responsive copy paste dibawah ini

<style>image { width: 100%; }</style>

Kalau untuk iframe doang misalnya, kamu butuh untuk embed video kamu lebih responsive misalnya, maka kita perlu ngebuat dua display supaya lebih rapi gitu gaes.. pertama display buat desktop , lalu display buat mobile , nah kamu bisa copy paste deh code dibawah ini ke tema kamu.

untuk desktop version responsive

<style>iframe, .embed-responsive-16by9 ,.embed-responsive { width: 100%; height: 500px ; } </style>

untuk mobile version responsive

<style>@media only screen and (max-width: 500px) { iframe,.embed-responsive-16by9, .embed-responsive{ width: 560px; height: 315px; } }</style>

kalau desktop dan mobile resposinve untuk iframe video yang tinggal gabungin aje yes.. copas kode ini.

<style>

iframe, .embed-responsive-16by9 ,.embed-responsive { width: 100%; height: 500px ; }

@media only screen and (max-width: 500px) { iframe,.embed-responsive-16by9, .embed-responsive{ width: 560px; height: 315px; } }

</style>

Terus kalau kalian ingin ngebuat semua gambar dan video menjadi responsive lagi dengan class bootstrap versi lawas lama jadul oldschool, walau kalian sudah makai bootstrap versi teranyar , maka cara ini bisa dilakuin ya tanpa ngerubah satu persatu, jadi lewat css aja my man.. lebih simple dan mudah dong , ya gak….

kode untuk all gambar dan video menjadi responsive all

<style>

img {max-width: 100%;}

iframe, .embed-responsive-16by9 ,.embed-responsive { width: 100%; height: 500px ; }

@media only screen and (max-width: 500px) { iframe,.embed-responsive-16by9, .embed-responsive{ width: 560px; height: 315px; } }

</style>

Nah semoga kalian bisa terbantu ya dari post ini - Cara agar iframe bootstrap jadul lama menjadi responsive

Blog Post ini dibuat awalnya karna ada warning dari mbah google, karena masalah kesehatan situs karna ada video yang tidak dapat ditampilkan, itu yang kita baca pada petunjuk google search console, nah ternyata setelah kita sekelidikin atau selidikin, ternyata masalah utama adalah pada penggunaan class versi bootstrap lawas , maklum karna kita makai versi baru saat ini versi 5 an ya, itu yang jadi nya ngebuat tidak responsive nya video kita, untuk image kita uda fix kan sebelumnya, dan ternyata kelupaan untuk masalah iframe video ini, makanya tadi uda kita fix kan, terus posting deh agar kalian kalau ngedapatin masalah yang serupa bisa kebantu yes…

BONUS :

« Previous