Web Development

Responsive web design tool review: Embed Responsively

Embed Responsively allows you to transform fixed width embedded media content into flexible and fluid responsive objects. See how the tool works.

EmbedResponsively_logo_091013.gif
Embedding videos and media rich content from sources such as YouTube, Vimeo, Dailymotion, Google Maps, Instagram, Scribd, Twitter, Facebook, and more can be a challenge when it comes to ensuring that the embed content resizes to fit across all devices. With Embed Responsively created by Jeff Hobbs, you can transform fixed width embedded media content into flexible and fluidly responsive objects. Jeff's code is based on research and work by Thierry Koblentz and his A List Apart article "Creating Intrinsic Ratios for Video," Anders Andersen and his piece on "Responsive embeds," and Niklaus Gerber's contribution entitled "Responsive Google or Bing maps." The code for Embed Responsively is available on GitHub for download.

I wanted to see if the Embed Responsively website would display with responsiveness, and it did. Figure A shows the site displayed on an iPhone with the YouTube media source and an obligatory YouTube video URL entered and selected.

Figure A

EmbedResponsively_FigA_091013.gif

How it works

The Embed Responsively tool takes whatever embed URL you want to use from the supported media sources list and, with one click of the Embed button, creates the embed code. I copied the resulting code from the page and added it to a demo HTML file along with the CSS. For each embedded media object, it creates a CSS styling with a class of embed-container with the following CSS snippet as copied from the instance that I tested with a YouTube video.

.embed-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; max-width: 100%; height: auto; }
 
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

The tool also creates a container with an iframe for the YouTube video, as shown in the HTML code snippet below.

<div class='embed-container'>
  <iframe src='http://www.youtube.com/embed/H6b7zJ-hx_c' frameborder='0' allowfullscreen></iframe>
</div>

The resulting HTML code when viewed in Chrome Inspect Element and from the Elements tab shows the following HTML code snippets for the YouTube embed, which includes its own video player and several scripts that manage the video player (Figure B).

Figure B

EmbedResponsively_FigB_091013.gif

The YouTube HTML5 Player is the default configuration, followed by fallbacks for Adobe Flash Player and QuickTime player.

Testing in various screen widths

Figure C shows the same demo HTML file as viewed in Chrome is displayed at approximately a 1080 pixel width. Note: The image has been reduced to 800px wide for viewing purposes.

Figure C

EmbedResponsively_FigC_091013.gif

Figure D shows the same demo page with the Chrome browser at about a 550 pixel width.

Figure D

EmbedResponsively_FigD_091013.gif

I tested the same embed tool with a sample Vimeo hosted video, and it resulted in the same CSS as the YouTube video embed; however, the resulting HTML was slightly different, as shown in the code snippet below.

<div class='embed-container'>
    <iframe src='http://player.vimeo.com/video/73009149' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>

Notice the addition of the webkit and moz allow full screen attributes are added to the Vimeo HTML code. Vimeo uses what it calls a Universal Player Code to detect the device and choose the correct player based on the user's device. The sample Vimeo video as shown in Chrome is displayed in Figure E at approximately 600px wide.

Figure E

EmbedResponsively_FigE_091013.gif

This article is not about the details, options, or configuration settings available with embedding media into your websites, but it is interesting (though not surprising) that any right-click over each of the embedded video yields a different set of menu options (Figure F).

Figure F

EmbedResponsively_FigF_091013.gif

It goes to show that you can embed media from multiple sources on the same web page with no errors.

For giggles I decided to try out an Instagram embed source since this would result in the ability to sample an image for responsive testing. The first thing I noticed on the generated code is that it is missing the “http:” from the embed code for the Instagram image; I had to manually enter this for the image to appear in my demo HTML file. The CSS code is a bit different for the image as shown in the code snippet below (I added the –i at the end of the embed container classes to eliminate a conflict with the video embeds from within the same demo HTML file).

.embed-container-i {position: relative; padding-bottom: 120%; padding-top: 30px; height: 0; overflow: hidden;} 

.embed-container-i iframe, .embed-container-i object, .embed-container-i embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

The HTML code snippet is displayed below for the embedded Instagram image.

<div class='embed-container-i'><iframe src='http://instagram.com/p/d7o677tZtw/embed/' frameborder='0' scrolling='no' allowtransparency='true'></iframe></div>

The resulting image of a Carolina Low Country Boil, which has set dimensions of 612x612 is displayed at approximately 550px width in Chrome (Figure G).

Figure G

EmbedResponsively_FigG_091013.gif

Summing up

You need to be careful with taking the code and copying it directly from the Embed Responsively tool without first testing it in your development environment, as in the case of the Instagram example with the missing HTTP URL prefix.

Once you get your basic embed code generated, you can reuse the same CSS and container div HTML for video and image media by adding the specific URL for the media sources. All three examples in this demo were embedded within the same HTML document file.

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

4 comments
Diana Perk
Diana Perk

Excellent job !!Creating responsive design is the need of both clients and users because of rapidly growing use of smartphone devices which becoming a growing channel for business.Web Designers get difficulty in embedding the video .This post help web designers to embed the media content.Thanks for sharing

wrsbuilder
wrsbuilder

 Excellent ! really valuable code for responsive web designing.

Thanks,

WRSBuilder

wrsbuilder
wrsbuilder

Excellent ! really valuable code for responsive web designing.

Thanks,

WRSBuilder

lastchip
lastchip

An interesting article that sort of partly addresses a problem I've been struggling with of late.


We all know one can use @media queries to adjust css code for different screen resolutions. But now (I'm told), smart phones are being produced with 1280px resolutions, so what is the best way to determine the device type to render css code, rather than relying on screen resolution?


Sure, you can determine a limited amount of devices using .htaccess code, but there are hundreds of smart phones, tablets and screens, all with varying sizes and resolutions.


So I guess I'm saying, it's no longer about screen resolutions, but physical screen size.


I can produce a responsive site that will render correctly at 1280px on a 22" screen, but that same 1280px on a smart phone will be as good as useless.

Editor's Picks