Demo: the JW Player is awesome for the modern web. The WordPress plugin needs work though, because it restricts its usage.
Created
January 21, 2014 23:23
-
-
Save anonymous/8550608 to your computer and use it in GitHub Desktop.
A Pen by Khalid.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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