Easy Way to Embed Rich Media Responsively

Responsive web design

Responsive has been the buzzword in web design in the recent years, and it is for good reasons. A website designed responsively, or responsive web design (RWD), automatically adapts the layout based on screen size of the device user is using to provide optimal viewing experience. As a result, RWD minimizes page resizing, panning, and scrolling, thus provides user with easy reading and navigation.

Embedding responsive rich media

One of the challenges of RWD is embedding rich third-party media responsively. This is because many rich media, such as YouTube, Google Maps, Instagram, Vine, do not provide responsive embed code, thus breaking an already responsive web page.

Enter Embed Responsively

Fortunately, Embed Responsively provides an easy way to embed rich media responsively in only three steps:

1. Copy the URL of the rich media. If you're embedding a YouTube video, you can copy the web address from the address bar or the Share tab below the video.

2. Paste the URL to Embed Responsively. Select the appropriate media source, then after you paste the URL on the appropriate column, click Embed.

3. Copy the embed code and paste it on your web page. The website then will provide preview of the video and the embed code.

Now sit back, relax, and enjoy the now responsive video.

Go a bit further

Apart from the iframe, the embed code actually contains two additional tags, i.e., style and div. If you often embed rich media in your post, just copy the content of the style tag:

.embed-container {
 position: relative;
 padding-bottom: 56.25%;
 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%; 
}

and paste it to your CSS. The next time you are embedding rich media, just put the iframe between the div tags:

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

Photo by jonsson is licensed under CC BY 2.0.

HTML tags are converted with Plus2Net to display correctly.