Improving Slideshare embeds

NotesPosted on:

Here’s a small JavaScript snippet that may help you embed a Slideshare document in an optimized way.

When you use the built-in oEmbed mechanism in WordPress, you don’t have much control on the iframe attributes, and Slideshare sets the width/height of the iframe to 427/356 px. That’s pretty tiny, the standard content-width of a post being around 700-800 px.

It’s quite easy to set the width to the maximum available area, with a single CSS rule:

.entry-content iframe[src*="www.slideshare"] {
  width: 100% !important;
}

But the problem is the vertical dimension, which depends on several factors:

  1. The ratio of your slides: you want the size of the iframe to match the content.
  2. The available screen estate: you never want the slides to be higher than your screen size (including some margin for menus etc).

So here’s a way to achieve the best compromise, in JavaScript:

$(".entry-content iframe[src*='www.slideshare']").each(function() {
  var $this = $(this);
	  
  var slideW = $this.attr('width');
  var slideH = $this.attr('height');
  var slideRatio = (slideH / slideW);
	  
  var itemW = $this.width();
  var idealH = itemW*slideRatio;
	  
  // calculate max height: window - nav bar...
  var maxH = ( $(window).height() - 162);
  if ( idealH > maxH ){
    $this.css( "height", maxH );
    // console.log("applied maxHeight: "+maxH);
  } else {
    $this.css( "height", idealH );
    // console.log("applied idealHeight: "+idealH);
  }
});

The number 162 represents the minimum top/bottom margin (it gets subtracted from the total screen height). It’s the part you probably need to customise, depending on your theme – in my case, it matches the size of the fixed navigation bar.

Here’s the link to the Github Gist, for your forking and editing pleasure.