Responsive Site Designer Embeded Video

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

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

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='https://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

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

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

Figure D

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='https://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

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

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

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.