Responsive Embed Codes
Twenty twelve theme for wordpress is responsive enough. Meaning that, any WordPress website using that theme will resize itself to fit many screen sizes. This site uses twenty twelve theme. It resizes pretty well on different screen sizes. To check how your site looks on different screen sizes, just resize your browser and load the page. It’s the quick and easy way to find out how it looks on different screen sizes. But there are things like ads and embeds that span across the screen, making it harder to read on devices like phones or tablet, as it doesn’t fit the screen size! You need to use a horizontal scroll bar to see it in full. How to fix it?
Amit of Digital Inspiration wrote a code snippet that you can use to get responsive Adsense ads on your site. It is approved by Google, as any modification to your Adsense code is against their terms and needs their approval before use. You can use that code for your ads, it’s approved.
Alright, you site needs to be responsive, your ads need to be as well. Now what? Embeds! Let’s take a look at the embeds. Enter EmbedResponsively.com. Let’s face it, Youtube, Instagram, Vimeo and lots other services don’t have responsive embed codes. The code you get to embed from these sites is static and it doesn’t change in size to fit different screen sizes. You still can’t get rid of that horizontal scroll bar. But with EmbedResponsively you can.
Well it is a responsive site, this should be a no-brainer, but look how it fits the resized screen size. Use this site, to get responsive embeds for Youtube, Vimeo, Instagram and even Google Maps! You just have to paste the video URL that you would like to embed and you get a neat responsive embed code. Let’s take a look at Youtube, Instagram and Google maps embed code, on a resized screen.
Youtube videos are the most embedded ones. There have been talks around how to make a page with Youtube video load faster. But it also has to fit the screens of phones and tablets. Paste a Youtube video link on the EmbedResponsively, it is set to Youtube by default. This on a resized screen should look like on the image below,
As you can see from the code, it has no fixed height and width. It’s position is absolute, with height being zero, and the width is 100%, The overflow is hidden. This simple CSS code makes it responsive, of course with no fixed widths and heights. When you keep resizing the screen, watch how the videos gets resized and fits the screen.
The same should work for Instagram and Vimeo. Let’s take a look at Google maps. For the videos you just need to paste the URL, but for Google maps, you need to paste the Embed code of the map.
It fits the screen very well. The embed code got bigger, as it’s the CSS that increases the size. Like said earlier, these CSS codes makes it responsive.
You can also paste any IFRAME code and get a responsive code output. The responsive CSS codes looks similar.
.embed-container iframe, .embed-container object, .embed-container embed
<div class='embed-container'> <span style="color: #ff0000;">EMBED CODE OR EMBED URL</span> </div>
Back at EmbedResponsively, when you click more, you discover sites that already has responsive embed code, like Scribd, Twitter, Soundcloud and Storify.
The EmbedResponsively is a good tool for web masters and bloggers to have the missing responsive piece – the embeds!