Responsive Iframe Css Tricks

Find best Web Development tips and Tricks.
Post Reply
arnlweb
Site Admin
Posts: 92
Joined: Wed Jun 22, 2016 1:28 pm
Location: India
Contact:

Responsive Iframe Css Tricks

Post by arnlweb » Sat Jan 13, 2018 8:59 am

How to make your Iframe code responsive?

Code: Select all

<iframe class="button-api-frame" id="myframe" src="//youtubetoany.com/@api/button/mp3/mevO4I0f5lg" width="100%" height="100%" allowtransparency="true" scrolling="no" style="border:none"></iframe>
Add Css ID "myframe":

Code: Select all

<style>@media screen and (min-width: 651px) {#myframe{height:100px!important;}}@media (min-width: 400px) and (max-width: 650px) {#myframe{height:200px!important;}}@media (min-width: 200px) and (max-width: 399px) {#myframe{height:300px!important;}}
</style>

Post Reply