It take two easy steps to embed Google Maps / Youtube Videos / Instagram, Twitter, Facebook etc. in your web pages. While you are on the platform take embed codes from share buttons and that's it.

 

Note: We take Google Maps as example.

 

How to Embed Google Maps Responsively

This is the default embed code for the new Google Maps:

<!-- Height=450px; Width=600px -->
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d7098.94326104394!2d78.0430654485247!3d27.172909818538997!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2s!4v1385710909804" width="600" height="450" frameborder="0" style="border:0"></iframe>

As specified in the height and width parameters of the embed code, the default height for medium embeds is 450px or 75% of the default width (600px).

If you wish to transform this static sized Google Map into one that is responsive, all you have to do is add a few CSS rules to your web page and wrap the embed IFRAME inside these rules.

 

The new embed codewith responsive style will be something like this.

<style>
    .google-maps {
        position: relative;
        padding-bottom: 75%; // This is the aspect ratio
        height: 0;
        overflow: hidden;
    }
    .google-maps iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }
</style>

<div class="google-maps">
    <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d7098.94326104394!2d78.0430654485247!3d27.172909818538997!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2s!4v1385710909804" width="600" height="450" frameborder="0" style="border:0"></iframe>
</div>

A similar technique can be used to embed Instagram videos and photos responsively.

 

For images you can simply do something like this:

<style>
img {
   width: 100%;
   height: auto;
}
</style>

and that will work on all images on your website Or you can use class instead and give that class in your img code if you like.

 

Example:

<style>
.responsive {
   width: 100%;
   height: auto;
}
</style>


<img src="Image URL" class="responsive" alt="Responsive Image" />

 

 

Did you like this tutorial? share and post a comment smile

Share this article:

Comments