responsive iframe

When we create an iframe in our site or page, the layout of iframe is always challenging for our site if our site is responsive and device friendly. I faced this issue many time when I try to embed any other site of doc in my blog post.

But then I found a solution for this, which is simple and easy. With the help of few line of simple css code we could make our iframe responsive. Without any delay lets see an example.

I have created an iframe here and embed my blog in this. This is fully responsive you may browse this page on different resolution and size of screen(like mobile, tablet, netbook, and PC). 

Here is the CSS style code snippet which we need to include in head or body section of html code.

<style>
.iframe-container { 

  /* this class will make the div container based on the size of the screen.

     we can adjust the padding-top to give a fixed height to div. 

 */
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: 100%; 
}

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
}

Below is the code to create iframe using html iframe tag. In this code you just have to update the src. src (source) attrubute will hold the source url which you want to show in this iframe.

</style>

<!--responsive iframe section -->
<div class="iframe-container"> 
  <iframe class="responsive-iframe" src="https://rashidjorvee.blogspot.com/"></iframe>
</div>

Hope this helps you! Thank You!