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>

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

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>

the addition of the webkit and moz allow full screen
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.


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).


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%; }

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>

resulting image of a Carolina Low Country Boil, which has set dimensions of
612×612 is displayed at approximately 550px width in Chrome (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

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.