I’ve been researching ways to make JW player 5 responsive and have tried both CSS/HTML and jQuery examples to modify the video player, but haven’t had any success. I’m using WordPress and am trying to add the code to the page using a raw .js module and page-specific css, if that makes a difference.
Here is the code:
<script type="text/javascript" src="http://www.360north.org/jwplayer5.9/jwplayer.js"></script>
<video id="mediaplayer" width="100%" height="100%" src="http://state.ak.tvwmedia.net:1935/ktoo-live/_definst_/360north/playlist.m3u8" type="video/mp4"></video>
<script type="text/javascript">
// <![CDATA[
jwplayer('mediaplayer').setup({
'id': 'playerID',
'width': '640',
'height': '480',
'image': 'http://www.360north.org/wp-content/uploads/2014/04/SmallVideoPlayer1.jpg',
'modes': [{
type: "flash",
src: "http://www.360north.org/jwplayer5.9/player.swf",
config: {
file: "360north",
streamer: "rtmp://state.ak.tvwmedia.net/ktoo-live",
provider: "rtmp"
}
}, {
type: 'html5',
config: {
'file': 'http://state.ak.tvwmedia.net:1935/ktoo-live/_definst_/360north/playlist.m3u8',
'provider': 'video'
}
}]
});
// ]]>
This method can be used for the JW Player – http://webdesignerwall.com/tutorials/css-elastic-videos
Basically, the iframe method – “Elastic Object & Iframe Embedded Videos”
http://webdesignerwall.com/demo/elastic-videos/
This method works with JW5.
Here is another way to make JWplayer 5 responsive, without an iFrame, but you must add code tags around the embedding code or it won’t work:
http://www.miracletutorials.com/how-to-make-jw-player-5-10-responsive/
I hope this helps?