How to Make SlideShare Responsive With FitVid.js

Open Source software is awesome. If it weren’t for WordPress then I’m not sure what I would be doing – but that doesn’t mean open source software is perfect, or that it fulfills all requirements.

The beauty of open source software is that you can change it to match your requirements – or even to do things it wasn’t meant to do.

For instance – I recently added a SlideShare presentation about SEO to this site – and it bothered me that the presentation wasn’t responsive. Not being responsive meant it was sat in a weird size to one side of the page. It also meant that on narrower screens it didn’t scale nicely.

Then I remembered FitVid.js. FitVid.js is a very simple JavaScript library that makes embedded videos (from sites like YouTube and Vimeo) responsive. It stretches them so that they fill 100% of the available space, and scales them with the browser. This functionality was exactly what I wanted for SlideShare. Even though Slideshare isn’t a video it’s embedded in the same way so I thought I would see if I could add SlideShare support.

And I can.

And it was easy 🙂

To resize the videos FitVid.js has a list of iframes and their source urls that it searches for to apply the sizing code to. All I had to do was add SlideShare.net to the list.

To do this I found this code:

var selectors = [
	"iframe[src*='player.vimeo.com']",
	"iframe[src*='youtube.com']",
	"iframe[src*='youtube-nocookie.com']",
	"iframe[src*='kickstarter.com'][src*='video.html']",
	"object",
	"embed"
];

and added iframe[src*='slideshare.net'] making:

var selectors = [
	"iframe[src*='player.vimeo.com']",
	"iframe[src*='youtube.com']",
	"iframe[src*='youtube-nocookie.com']",
	"iframe[src*='kickstarter.com'][src*='video.html']",
	"iframe[src*='slideshare.net']",
	"object",
	"embed"
];

More FitVid?

After making the change I found that there’s actually a second (possibly better) method for adding support for slideshare. It turns out FitVid has support for adding your own resizable videos (or presentations in this case).

All you have to do is pass the resize string as a parameter when initiating FitVid. Which for Slideshare looks like this:

$("#thing-with-videos").fitVids({ customSelector: "iframe[src^='www.slideshare.net']"});

I kept my modified version since I had already rewritten a lot of FitVid to remove things like inline styles – and to make it play better with jQuery.

Updated

I’ve now added support to my site for Prezi (because of this post about WordCamp EU) so here’s the updated ruleset.

var selectors = [
	"iframe[src*='player.vimeo.com']",
	"iframe[src*='youtube.com']",
	"iframe[src*='youtube-nocookie.com']",
	"iframe[src*='kickstarter.com'][src*='video.html']",
	"iframe[src*='slideshare.net']",
	"iframe[src*='prezi.com']",
	"object",
	"embed"
];