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.

 

Example:

 

 

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

Share:

Enjoy this?

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