Skip to content

Instantly share code, notes, and snippets.

Created January 21, 2014 23:23
Show Gist options
  • Save anonymous/8550608 to your computer and use it in GitHub Desktop.
Save anonymous/8550608 to your computer and use it in GitHub Desktop.
A Pen by Khalid.
<div class="container">
<h1>Responsive audio player</h1>
<p>Demo for the JW Player support forums, as you <a href="http://www.longtailvideo.com/support/forums/jw-player/working-with-wordpress/36869/how-to-override-settings-output#comment-204952">requested</a>.</p>
<div id="player">Loading...</div>
<!-- The documentation told me to place the JS 'at the location you want the video to appear', but it would be more appropriate to add this to the JS section -->
<script>
jwplayer("player").setup({
"width":"100%",
"height":26,
"primary":"html5",
"file":"https://dl.dropboxusercontent.com/u/94677785/codepen-asset_beep.mp3" // tick sound from http://css-tricks.com/?p=17841
});
</script>
<hr/>
<p>How I think the WordPress plugin should be adjusted to support responsive video <em>and audio</em> players. Check the description below the image for details.</p>
<figure>
<img src="https://dl.dropboxusercontent.com/u/94677785/codepen-asset_wp-plugin-suggestion-revision.png">
<figcaption>Delete the 'Player Size' option because it's a restriction when you're using an audio-only player. Add radio buttons to '<del>Fixed</del> width' with an option to set a fixed <code>width</code> and an option to use the value <code>"width": "100%"</code>, which makes it responsive. And add radio buttons to '<del>Fixed</del> height' with an option to set the <code>aspectratio</code>, which overrides <code>height</code> (according to the docs) and an option to use a fixed <code>height</code>. The settings above would make the audio player responsive.</figcaption>
</figure>
</div>

Responsive audio player

Demo: the JW Player is awesome for the modern web. The WordPress plugin needs work though, because it restricts its usage.

A Pen by Khalid on CodePen.

License.

body {
background: #eee;
padding: 20px;
margin: 0;
font-family: sans-serif;
line-height: 1.4;
}
.container {
background: #fff;
max-width: 600px;
padding: 40px;
margin: 20px auto;
border-radius: 3px;
box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
h1, p, #player, figure {
padding: 0;
margin: 0 0 25px 0;
}
a {
color: #07b;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ddd;
margin: 30px 0;
padding: 0;
}
img {
padding: 0;
margin: 0 auto;
max-width: 100%;
height: auto;
display: block;
}
figure {
background: #f1f1f1;
}
figcaption {
padding: 20px 0;
margin: 20px;
border-top: 1px solid #ccc;
box-shadow: inset 0 1px 0 #fff;
}
code {
margin: 0 1px;
padding: 2px 4px;
background: #e0e0e0;
border: 1px solid rgba(0,0,0,.1);
color: #333;
border-radius: 3px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment