Responsive Iframe and Images in Website

Iframe is the worst part of any website if leave careless. Because when you embed a video or anything it spill over your area and give bad effect in to user he has to scroll here and there to watch video and frames. Learn how to solve this problem.

Before an year ago there are no responsive frameworks available to make Websites device compatible. Still old websites are not customized to any responsive framework they are custom made and have many things to revised. We are going to talk about responsive Iframe and Responsive Images without any plugin or any frameworks. Because old websites developed on CSS/HTML, and for this purpose you have to add a little CSS at top of Style Sheet.

Responsive Iframe:

iframe {
max-width:100%;
width:100%
height:auto;
}

Above code will make div according to device if you want to make a little padding and margin then you need to give width some less then 100% like 90% and then give margin:0px auto; so it will always be in center.

Responsive Images:

img {
max-width:100%;
height:auto;
}

This concept is based on bootstrap responsive images. Hence it will be responsive at any cost. Never give any image fixed width and height it will broke in devices always.

Responsive Images in Bootstrap

Thanks to bootstrap that they allow everyone to make their images responsive according to mobiles or tablets. They automatically adjust the image size according to device. Just you have to use a class called “img-responsive” which is quite better and best for any image to be responsive. Take a look of code how to use.

<img src="image-name.jpg" class="img-responsive" />

if you want to make this image align center then a class called center-block will be use for this purpose. Your code will become.

<img src="image-name.jpg" class="img-responsive center-block" />

Responsive Iframe in Bootstrap

If you are making website from scratch then you have to add div’s before your iframe tag.

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="…"></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="…"></iframe>
</div>

This is the simple way 2 aspect ratios from bootstrap. 16:9 and 4:3. you can use any of them according to your need. Read More about Responsive Iframes on Bootstrap Site.

Leave a Reply

Your email address will not be published. Required fields are marked *