Make Your Embedded Content Work Well in Your Responsive Websites
Some of the HTML elements don’t work well with responsive layouts. ol’ iframe is one of these, which you may necessitate to use when embedding content from outside authors such as YouTube. Here we will see – how can you make embedded content responsive by making use of CSS, so that contents like videos resize with the viewport of the browser. When non-coders embeds videos on your website and you don’t want to depend on them, adding extra markup; for those occasions – there is a solution which uses CSS.
When you want to embed any content from an external source, an iframe is the code that you will have to include. Here you go with an example:
<iframe src="http://www.youtube.com/embed/4aQwT3n2c1Q" height="315" width="560" allowfullscreen="" frameborder="0"></iframe>
As you can see in the above code – iframe includes an URL which points to the source of the streamed content. With the help of this, you will be able to embed and display external content on your website.
Width and height attributes also play an important role in iframe, because without these, your iframe will disappear; as there will be no dimensions. Also remember that – you won’t be able to fix this in your style sheet.
Let us see how it works?
The tool named Embed Responsively creates the embed code, with just one click on the embed button. This tool will take the embed URL which you would like to use from the media sources like YouTube, Dailymotion, Facebook, Instagram, Vimeo, Google Maps, Scribd, Twitter and lots more. You just need to copy the resulting code of the page and then you have to add it to an HTML file together with the CSS.
This tool will create a CSS styling with the class name ‘.embed-container’ for each embedded media object. Following is the CSS snippet code for the 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%; }
This tool will also create a container with an iframe. Below is the HTML snippet code for the YouTube video:
<div class='embed-container'>
<iframe src='http://www.youtube.com/embed/H6b7zJ-hx_c' frameborder='0' allowfullscreen></iframe>
</div>
iframe contains all embedded content that resizes with the browser’s window.
Note: There are two main ways to embed video from any media source to your website, they are:
HTML5 video element – It doesn’t work on heritage versions of IE browser.
Flash – It doesn’t work on iOS devices as well as it is not standards-compliant.
Summing it all up
Hence, Embed Responsively tool is a one-click way to generate the copy-paste-code. Once you get your basic embed code generated, you can also reuse the same CSS and container div HTML for video as well as image media by appending the specific URL for the media sources. And, with the help of this tool you can embed media from multiple sources.
Remember, resizing is not always a solution. Because, Embedded content actually breaks responsive layouts, as iframe is contained with a fixed width. And, in some cases – when editors have to deal with so many videos and they are not technically sound, then JavaScript is the best option.
Jyotirmayee Sahoo is a tech-savvy writer working with Zealousweb Technologies which is a leading web design, development and digital marketing company in India. You can connect with Jyoti on Google+
