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.
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.
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.
Alexander Futekov is a Principal Front-End Developer at Progress. He has been working with web technologies for more than 6 years and loves experimenting with wacky CSS ideas. Always short on time to do what he loves - writing and speaking about his latest ideas. The few years he spent studying anthropology and working in the usability domain help him not to forget that code should be written first for people and then for machines.
Let our experts teach you how to use Sitefinity's best-in-class features to deliver compelling digital experiences.Learn More
Subscribe to get all the news, info and tutorials you need to build better business apps and sites
You can also ask us not to share your Personal Information to third parties here: Do Not Sell or Share My Info
We see that you have already chosen to receive marketing materials from us. If you wish to change this at any time you may do so by clicking here.
Thank you for your continued interest in Progress. Based on either your previous activity on our websites or our ongoing relationship, we will keep you updated on our products, solutions, services, company news and events. If you decide that you want to be removed from our mailing lists at any time, you can change your contact preferences by clicking here.