The Best Way to Automate Responsive Video Embeds

A Content Management System such as Progress Sitefinity is a great tool for empowering marketing professionals to deploy any piece of content.

However, some content types—videos, slideshow presentations, maps and other externally embedded pieces—may require additional effort for displaying on a responsive website. It’s important to be able to scale the asset while preserving the appropriate ratio.

The CSS code below for making content responsive comes bundled with the popular framework, Bootstrap, which is supported by Sitefinity:

The code itself is not impressive; it simply enables you to make external embedded content scalable and compatible with your responsive design. It also has a few predefined classes you can use for the more popular aspect ratios. You can add one yourself: when you have XbyY, the padding-bottom needs to be equal to the Y/X. This provides an alternative to simply pasting a standard YouTube embed code, such as:

Instead, you can wrap it in another tag with our new fancy classes, ensuring the video will scale and preserve its aspect ratio, no matter the resolution of your user's screen.

That’s Not Very Simple, Though

Adding this code for every embedded video or presentation is far from intuitive and is prone to errors. The best thing we can do is preserve the ability to manually set such classes with a specific ratio, but automate all others. A nice way to do this is to use a simple JavaScript snippet that goes through each iframe or embed, and makes it responsive with little help from the CSS code:

This code modifies embeds from YouTube, Vimeo and SlideShare and sets their ratios as equal to that of the actual video, so users never see black lines above or below the video. Lines 1, 2 and 3 in the code above contain elements and domains from which you will add embeds. Line 4 tells the script to ignore elements that already have the <div> element from above added manually. Line 5 does the magic by calculating the ratio you need, and applying it to each element that matches what you need (declared in lines 1, 2 and 3).

NOTE: The code above requires the jQuery library. You must make sure the script is always loaded at the end of the document.

Conclusion

That’s it! With just a couple lines of CSS and JavaScript code, we empower content writers to embed media that stays responsive regardless of screen size. In all other cases, we automate responsiveness intelligently, based on the native ratio of the embed itself.

Extending your CMS in this way will enable marketing folks to focus on marketing and worry less about technical details, all while maintaining the high quality of the supported site.

Check out this overview of what other cool things developers can do with Sitefinity. Also, you can find technical documentation here.