How To Embed YouTube, Vimeo, Instagram, And Google Maps Responsively

One of the biggest buzzwords inside the online design world inside past 2-3 years must be ‘Responsive.’ With the advent of browsing on eve...

How To Embed YouTube, Vimeo, Instagram, And Google Maps Responsively

One of the biggest buzzwords inside the online design world inside past 2-3 years must be ‘Responsive.’ With the advent of browsing on everything from a 4 inch smartphone screen to your 27 inch display, it can be hard to make sure that your internet site or blog looks good it doesn't matter what. That’s why a responsive design is crucial because it can automatically detect what device you’re using to get into the site, and adjust it to match the size of your screen.

While you can design your whole website to be responsive, once you’re embedding external content, it won’t necessarily adjust itself to suit the screen or device your site visitors are using. Sites that don’t provide embeddable responsive content include giants like YouTube and Instagram, but you are able to use a site like Embed Responsively to rework that content into responsive embeds.

The History of Responsive Web Design

The term responsive website design only goes back to 2010, if it was coined by designer Ethan Marcotte in a article on A List Apart. He wrote:

“We can design for an optimal viewing experience, but embed standards-based technologies into our designs include them as not only more flexible, but more adaptive for the media that renders them. In short, we must practice responsive web page design.”

Now just three years later, and the importance of responsive website design has continued to grow, and in addition to making certain that you’re utilizing a stunning, responsive design or theme, there are plenty of interesting responsive tools that it is possible to use to be sure that you’re providing an entirely responsive experience for your internet site visitors.

Embed Responsively

So while your theme may be responsive (similar to this list of gorgeous responsive WordPress themes), there are particular embeds that won’t necessarily adapt to suit the size of a visitor’s screen. While you'll be able to embed content from Twitter, Storify, SoundCloud, and Scribd, they’ve already done every one of the heavy lifting for you personally. So if you embed a tweet by way of example, the embed is responsive so that it will be resized to fit your visitor’s screen.

There are a few culprits, however, that haven’t gotten around to providing responsive embeds in order that when you share content from other sites, it will automatically adapt towards the screen it can be being viewed on. That’s where Embed Responsively comes in. If you know on your path around code, you can always edit the source code and convert it in to a responsive one, but Embed Responsively just helps it be a copy-paste affair - dead easy!

The service currently words with Instagram, YouTube, Vimeo, Google Maps, and also with generic iFrame embeds. It’s a wonder sites genuinely haven’t got around to using responsive embeds; but perhaps that’s why something like Embed Responsively has come around. You can visit ‘More’ on the site to see a small list of popular sites which might be currently responsive.

How to Use the Service


Using Embed Responsively couldn’t be easier. All you need is the initial embed code through the service you want to use. To embed a YouTube or Vimeo video, you just need to the direct link for the video. If you need to embed an Instagram photo, it’s the same thing - just obtain the link towards the Instagram image on the internet. With Google Maps, conversely, it’s a little more complex because you'll be able to’t just use a direct link - you have gain access to Google Map’s embed code. 

To have the embed code on your Google Map, open up the map and click the link button within the top right hand corner with the sidebar. It will throw open the embed code you are able to past into Embed Responsively. (If you’re still considering how to create personal maps to share with your mates and followers, be sure to check out our guide to creating maps with layers.)

Google Maps

Once you’ve got the link/embed code of your liking, you are able to go ahead and paste it in to the Embed Responsively window  - make absolutely certain you have the correct tab selected. Click the ‘Embed’ button, as well as the website will generate an embed code that you can use on your own site or blog that will probably be fully responsive.

Embed Responsively1


It’s obvious obviously, that the website should be responsive to begin with as it’s your website that is the wrapper for every one of the code. Embed Responsively is an easy little site which gets rather a lot done. If you’re set on responsive design and would like to provide any visitors with a seamless experience , you’ll wish to add this website to your arsenal of blogging tools.

What think of Embed Responsively? Let us know within the comments.

Image Credit: Blank tablet via PlaceIt



blogging,255,computing,705,ebook,53,ebooks,354,freebies,358,graphics,225,IFTTT,3,internet,207,mobile,252,news,99,sharedtutor,78,slider,2,video tutorials,5,VideoHive,1156,YouTube,1005,
SharedTutor Tutorials For Everyone: How To Embed YouTube, Vimeo, Instagram, And Google Maps Responsively
How To Embed YouTube, Vimeo, Instagram, And Google Maps Responsively
SharedTutor Tutorials For Everyone
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy