Ben
Ben is a lifelong Nintendo fan who likes to build websites, and make video games. He buys way too much Lego.
WordPress and Games
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" ];
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.
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" ];
Thanks for your article, can i use this for my site. Please let me know
Absolutely. Anyone is welcome to use this – that’s why I shared it 🙂
Is this applicable only to videos or for PPTs and PDFs also? I embedded the code for a pdf file uploaded to slideshare and this change is not resizing the iframe accordingly.
I don’t know – I would imagine it would work. Do you know have a link?
Hi,
Thanks for sharing.
The video is responsive, but what should i do to make the youtube is on the default size on desktop mode.
Example, when you are embed the code from youtube, you will get the width and height on that video. But when you are using this plugin, it seems the plugin ignored that size.
Hi – you would have to ask the people who developed the plugin about this. I modified it but I don’t know how it works.