Make The Embedded Libsyn Podcast Player Responsive

When I first started designing the Bourbon Pursuit Podcast webpage from scratch I wanted to make sure the entire site was responsive from big 30" monitors to the smallest mobile and tablet screens. Many people are familiar with Libsyn as the popular hosting platform for many podcasts. However, their process for embedding their player can be improved beyond setting the Width and Height.

First off, never use the Legacy player. It's based off flash and will not work on any mobile device. I will be using the Standard player since it's based on HTML5 and can be manipulated. Let's take a look at the Embed code that Libsyn provides. It's fixed with height and weight. We will put it some custom CSS and change this embed code so the only thing you will ever change is the ID for every new episode (ie. ...embed/episode/id/3703250/height/50...

To follow some of the best practices for development, let's throw this into its own <div>

<div id="player">
              <iframe src="http://html5-player.libsyn.com/embed/episode/id/3703250/height/50/width/340/theme/standard/direction/no/autoplay/no/autonext/no/thumbnail/yes/preload/no/no_addthis/no/" scrolling="no"  allowfullscreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen></iframe>
</div>

The first thing we did was add http to the embedded link. We removed the height="360" and width="640" from the added properties because we want to dynamically change those. I also changed the height to 50 and width to 340 within the link. This is to make sure we only have the Standard Player and not the whole image on top.

Next we need to add some CSS to make the magic happen. Within your main CSS file add the following:

#player {
  width: 70%;
  float: left;
  padding: 0% 2.5%;
}

#player iframe {
  height: 50px;
  width: 100%; 
  padding-top: 5px;
  border: none;
}

Awesome, now lets fix it for mobile devices. On your responsive/mobile CSS file add the following:

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 769px) {
       #player {
	  	width: 55%;
	  	padding: 0% 2.5%;
	}
}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
  	#player {
	  width: 90%;
	  padding: 0% 5%;
	}
}

There we go. Not bad right? Go check out bourbonpursuit.com and resize it to see it all in action. 

few

fewf