EmbedResponsively.com is a free online tool that allows users to generate the code necessary to embed media in a responsive way. Given the URL of a media item to embed, the site returns the code needed to format that same item so that it displays correcly on the user’s own site when viewed on devices of variable widths.
Visuals and Style
The interface is as simple as possible. Armed with the link to the resource in the clipboard, users select the type of media, then paste the URL in the field. The page refreshes and displays the snippet of code that is ready to be copied in. As a bonus, the page also renders the element for preview purposes.
The tool supports the following media types:
- Google Maps
- Getty Images
- Generic iFrame
Content and Audience
As any developer will tell you, embedding media in a responsive website is a challenge. Developers need to create a variation of the markup that will resize the media in response to the size of the window. In other words, the player embedded with the media needs to resize along with its outer container. EmbedResponsively.com takes care of that task near instantly. This is a great help when the time comes to incorporate foreign media elements in a blog or an online publication. The tool’s page loads fast and the wait time is negligible. The resulting code can be grabbed in one click and then pasted in the HTML source. This code works regardless of the particular CMS or the environment, including the majority of themes and frameworks such as Bootstrap and Foundations.