How to Make Embeds Codes Responsive +1
Author
Author

Robert Nicjoo [68]

I love Laravel & WordPress, interested to pass little knowledge that I have to others.

Qr-Code

Scan to visit on mobile

TJD STUDIO is Hiring

Photographer & Videographer

Apply now Jabodetabek

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

How do you like this article?

Back to top