How to Make Embeds Codes Responsive +1

How to Make Embeds Codes Responsive +1

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:

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.

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


For images you can simply do something like this:

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.





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


Enjoy this?

Subscribe our newsletter and get latest updates straight to your inbox.