The Best Way to Automate Responsive Video Embeds

The Best Way to Automate Responsive Video Embeds

Posted on October 20, 2016 0 Comments

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:

.embed-responsive {
  position: relative;
  display: block;
  height: 0;
  padding: 0;
  overflow: hidden;
}
.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.embed-responsive-21by9 {
  padding-bottom: 42.85714%;
}
.embed-responsive-16by9 {
  padding-bottom: 56.25%;
}
.embed-responsive-4by3 {
  padding-bottom: 75%;
}
.embed-responsive-1by1 {
  padding-bottom: 100%;
}

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:

<iframe width="853" height="480" src="https://www.youtube.com/embed/gNlya720gbk" frameborder="0" allowfullscreen></iframe>

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.

<div class="embed-responsive embed-responsive-16by9">
  <iframe width="853" height="480" src="https://www.youtube.com/embed/gNlya720gbk" frameborder="0" allowfullscreen></iframe>
</div>

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:

$('iframe[src*="youtube.com"]')
  .add('iframe[src*="player.vimeo.com"]')
  .add('iframe[src*="slideshare.net"]')
  .not('.embed-responsive iframe').each(function() {
    $(this).wrap('<div class="embed-responsive"></div>').parent().css('padding-bottom', this.height / this.width * 100 + '%');
  });

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.

Alexander Futekov

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.

Comments

Comments are disabled in preview mode.
Topics

Sitefinity Training and Certification Now Available.

Let our experts teach you how to use Sitefinity's best-in-class features to deliver compelling digital experiences.

Learn More
Latest Stories
in Your Inbox

Subscribe to get all the news, info and tutorials you need to build better business apps and sites

Loading animation