How to Make an iframe Responsive in WordPress

My main concern is that when my blog readers visit my blog on their iPhone, I don’t want everything to be at x width (100% for all my content) and then the iFrame misbehaves and is the only element wider (and hence sticks out past all the other content – if that makes sense??)

Its so important some time to have responsive Iframe for your website so that people who visit your website can easily see iframed content in to your website.

<div class="wrapper">
<div class="h_iframe">
<!-- a transparent image is preferable -->
<img class="ratio" src="https://sarmadgardezi.com/>
<iframe frameborder='0' height='465px' width='470px' scrolling='no' src='http://currentlyobsessed.me/api/v1/get_widget?wid=30&blog=Brighton+The+Day&widgetid=38585' frameborder="0" allowfullscreen></iframe>
</div>
</div>

Here is the CSS which help you to make it responsive

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

wanted to make the scroll available so I came up with this:

<div class="myIframe"> 
 <iframe> </iframe> 
</div>

// CSS

.myIframe {
   position: relative;
   padding-bottom: 65.25%;
   padding-top: 30px;
   height: 0;
  
   overflow: auto;
-webkit-overflow-scrolling:touch; //<<--- THIS IS THE KEY
   border: solid black 1px;
  }
.myIframe iframe {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
 }

Written By:

Sarmad Gardezi A blog scientist by Mind and a Passionate Blogger by heart. Sarmad is Freelancer, Entrepreneur and Google Apps Scripts Developer from Islamabad, Pakistan.

Subscribe to Email Newsletter