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.

Fit Vid

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"
];

Let me know what you think on Mastodon, or BlueSky (or Twitter X if you must).

Related Posts

28 Aug 2009

Binary Moon WordPress design vIII

As I briefly mentioned on Monday, I have finally redesigned Binary Moon.I actually started redesigning about 2 years ago. Initially it was going to be an update rather than a totally new look, and I even built most of it,...
13 Jul 2016

Why My WordPress Themes Site Doesn’t Use WordPress

I’ve mentioned it before but I run a WordPress themes site called Pro Theme Design. On it, I sell premium WordPress themes – but I don’t use WordPress to power the site.This probably seems like a strange thing to do...
26 Jun 2014

New TimThumb Exploit Found

It’s been reported today that there is a new TimThumb exploit found. Unfortunately nobody told me about this before the exploit was announced – in fact I found out about the bug through wptavern.com so I haven’t been able to...
28 Jul 2006

New Miniclip website

The old Miniclip website was a nostalgic playground for gamers, filled with simple flash games ideal for wasting time on. Unfortunately it is no more. This post was written in 2006. As of 2015 I no longer work at Miniclip....