How to Make Slideshare Responsive With Fitvid.js

Fitvid.js is a phenomenal script developed by Chris Coyier, and saved me about 100,000,000 hours every month. I use it to resize virtually every media object on my site.

To make Slideshare posts responsive the first thing you need to do is obtain the Slideshare embed code and paste it where you would like to have your video. Make sure that your remove and width and height parameters. Secondly, open up your fitvid.js file and locate the following 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"
      ];

Now you will want to add the following snippet right under the kickstarter selector.


"iframe[src*='slideshare.net']",

After you have added that snippet you should have the following code.


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

Save the file, make sure you’ve correctly targeted the area you would like to resize the videos in, and you should be all set.

If you would like you can also specify a new selector right in your jQuery code without altering the fitvid file by inserting the following code!


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

Let me know if you’re having any trouble int he comment section to the right!