[Plugin: JW Player for WordPress – Flash & HTML5 Video Player] Make JW Player Responsive?

@miketopher

I have just had the same issue yesterday and found the solution today. https://rogerlear.co.uk/?page_id=249

Roger fixed this issue. what I did to implement his code in mine is simply look at the source code.

Add this to your styles:

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* video dimensions - width/height for 16:9 videos */
	/* use 75% for 4:3 */

    padding-top: 0px;
	height: 0;
	overflow: hidden;
}
video {
	position: absolute !important;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
}
.videoWrapper .mediaplayer {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
}
.videoWrapper object,  .videoWrapper embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100% !important;
}
.mediaplayer .vjs-controls {
}
.vjs-spinner {
	display: none !important;
}
.video-wrap600 {
	width: 600px;
	max-width: 100%;
}
.video-wrap480 {
	width: 480px;
	max-width: 100%;
}

Then add this inside your template (i.e. home page template):

<div class="videoWrapper">
<div id="mediaplayer"><?php echo jwplayer_tag_callback("[jwplayer config=\"Champion\" mediaid=\"3072\"]"); ?></div></div>
<script type="text/javascript">
	var options = {
	    modes: [
		{ type: 'html5' },
		{ type: 'flash', src: '/jwplayer/player.swf' }
	    ],
            levels: [
		   { file: 'https://rogerlear.co.uk/bbbclip-BL-480x270.mp4' },
		   { file: 'https://rogerlear.co.uk/bbbclip-BL-480x270.webm' }
            ],
	    image: 'https://rogerlear.co.uk/bbbclip-BL-480x270.jpg',
	    height: '100%',
	    width: '100%'
	};
	jwplayer("mediaplayer").setup(options);

</script>

That should get you there. Simply replace the files with your files and the image with your image on your server. You should be able to just add this code directly into your theme and it will work.

Note: This code is particular to adding into a page template within your theme. I am working trying to make the videos I add to posts do the same. I am not to confident with how to make the player 100% using this plugin. I will keep you posted if I find anything else out.

awesome

I got the first part working, the player resizes, but the video is way cut off from the player

but i dont understand what you mean for the second part.

the second part seems to be Video specific, im using the short codes?
the second code looks like i would paste it for every video i post.. not sure how to work it

edit:
and now actually reading the rest of your post i see you pretty much said the same thing, so ill have to hold up until its more figured out.
cause i post videos on in posts.

Thanks a ton! hope theres some progress!

Hey guys,

I apologize for the hoops you’ve had to jump through to get this working. The next major version of the player (which is currently in development) will handle this use case much better. So keep an eye out for that being released.

Thanks.

hey LongTail is there an estimated release date of this? I really am looking forward to it and theres just no other options.. i cant seem to fix this myself and would like to know if i could expect it some time soon

Thank you

It will be after the next major version of the JW Player is released, JW6. It requires an update to the player which is being worked on at the moment. I’m afraid we don’t have an ETA.

how bout now? heh.. sorry just wondering do you have an estimate yet?

Thanks!

SInce i cannot get the above to work, do you have a working way i could moiy this until the new release.. i really need to get this going and im reliant on it being responsive.

Thanks!

We don’t have a way to do this I’m afraid. I am not sure of the exact ETA on the JW6 release, but it will be out sometime in October/November possibly (the player), with an update to the WP plugin to follow.

I have used this technique in the past for responsive videos and it works with the JW Player – https://webdesignerwall.com/tutorials/css-elastic-videos, you could always try to use it within WP as well.

I tried the code above, and it works with a single video. Thanks for your help. Is there a way to do it with the playlist on the right too? Any news on the release dates of JW6? It will be responsive with a playlist, correct?

JW6 should be out some time in November, with an update to the WP plugin coming after, I believe. I think it should work with a playlist, as well, but I haven’t tested that specifically.

Great, thank you. I tried it with the playlist, but I could not get it to work. Can I send you a link with a login in a private message to see what you think?

Sure, send it to LongTail Video Support at – https://www.longtailvideo.com/support/contact-us

Dear Longtail guys. How long do we have to exactly wait to get this plugin to work with responsive themes without jumping the hoops ?
The latest update 1.6.1 did not have this fix.
thnks in advance for any feedback.

1.6.1 was just a minor release. It doesn’t have any responsive design built in.

I fixed this issue for myself recently. I used the jquery below to resize the wrapper of the jwplayer according to the size of the content area that I needed filled.

$(document).ready(function(){
                resizeVideo();
            });

            $(window).resize(function(){
                resizeVideo();
            })

            function resizeVideo(){
                //Get Width of Container
                var width = $("section#story").width();
                //Calculate height based on width and video aspect ration then add the height of the control bar.
                var height = (width * 0.5625) + 40;
                //Update the container with the new height and width
                $("#jwplayer-1_wrapper").width(width).height(height);
            }

Let me know if this helps anyone.

fencer04

Could you please give a little more info on how to use this, im comfortable moving around the different files but i dont have a clue where this code goes

Thank you