{"id":29691,"date":"2017-04-11T21:01:25","date_gmt":"2017-04-11T13:01:25","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=29691"},"modified":"2022-07-13T19:41:56","modified_gmt":"2022-07-13T11:41:56","slug":"embed-responsive-video-superembed-js","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/embed-responsive-video-superembed-js\/","title":{"rendered":"Embed Responsive Videos Easily with SuperEmbed.js"},"content":{"rendered":"

The modern web is fully responsive<\/strong> and more designers are realizing this every day. But there\u2019s one pesky challenge when it comes to responsive design: embedded content<\/strong>.<\/p>\n

Every video site from YouTube to Vimeo has a default embed code<\/strong> fixed to a certain size. This means developers need to use other solutions<\/a> to create fully responsive videos<\/strong>.<\/p>\n

However, instead of using a CSS container class, you can use SuperEmbed.js<\/a><\/strong>, a free JavaScript library for creating responsive videos<\/strong>.<\/p>\n

\"superembed<\/a><\/figure>\n

This plugin solves two problems<\/strong> at once. All embedded videos will stretch to fill the main container<\/strong>, while also being flexible enough to resize based on the browser window<\/strong>.<\/p>\n

The best part is that SuperEmbed.js requires no extra code<\/strong>, so you can just embed the files<\/strong> and let them run<\/strong>. This JS library takes care of the rest by targeting embedded elements from certain sites<\/strong>.<\/p>\n

All videos maintain their specific aspect ratios<\/strong>, so you don\u2019t need to worry about wonky dimensions. And SuperEmbed works as a vanilla JS library<\/strong> with no dependencies<\/strong> such as jQuery.<\/p>\n

Right now, SuperEmbed supports 15+ video embeds<\/strong> from sites such as YouTube, Vimeo, Kickstarter, DailyMotion, Facebook, Vid.me, and Archive.org (among many others). This list is still growing<\/strong>, so expect more video streaming services to be added over time.<\/p>\n

To get this tool working, you just need to download the library<\/strong> and add it to your site\u2019s header<\/strong> like so:<\/p>\n

\r\n<script src=\"js\/superembed.min.js\"><\/script>\r\n<\/pre>\n
You can download a fully copy<\/strong> from the GitHub repo<\/a> which also includes specs for supported video sites<\/strong> and current browser support<\/strong>.<\/p>\n
For the most part, SuperEmbed supports all modern browsers<\/strong> from FireFox 3.5+, Chrome 4+, and versions of Internet Explorer 9 or higher.<\/p>\n
This is a very impressive library considering all the browser support and how well it works right out of the box<\/strong>. It\u2019s a much simpler solution than the CSS hacks if you\u2019re okay with relying on JavaScript.<\/p>\n
You can find more information<\/strong> on GitHub<\/a> and you can see it live running<\/strong> in this fiddle<\/a>.<\/p>\n