The modern web is fully responsive and more designers are realizing this every day. But there’s one pesky challenge when it comes to responsive design: embedded content.
Every video site from YouTube to Vimeo has a default embed code fixed to a certain size. This means developers need to use other solutions to create fully responsive videos.
However, instead of using a CSS container class, you can use SuperEmbed.js, a free JavaScript library for creating responsive videos.
This plugin solves two problems at once. All embedded videos will stretch to fill the main container, while also being flexible enough to resize based on the browser window.
The best part is that SuperEmbed.js requires no extra code, so you can just embed the files and let them run. This JS library takes care of the rest by targeting embedded elements from certain sites.
All videos maintain their specific aspect ratios, so you don’t need to worry about wonky dimensions. And SuperEmbed works as a vanilla JS library with no dependencies such as jQuery.
Right now, SuperEmbed supports 15+ video embeds from sites such as YouTube, Vimeo, Kickstarter, DailyMotion, Facebook, Vid.me, and Archive.org (among many others). This list is still growing, so expect more video streaming services to be added over time.
To get this tool working, you just need to download the library and add it to your site’s header like so:
<script src="js/superembed.min.js"></script>
You can download a fully copy from the GitHub repo which also includes specs for supported video sites and current browser support.
For the most part, SuperEmbed supports all modern browsers from FireFox 3.5+, Chrome 4+, and versions of Internet Explorer 9 or higher.
This is a very impressive library considering all the browser support and how well it works right out of the box. It’s a much simpler solution than the CSS hacks if you’re okay with relying on JavaScript.
You can find more information on GitHub and you can see it live running in this fiddle.
Read Also: Responsive Web Layouts for Mobile Screens: Intro, Tips and Examples
This post was originally published on this site