bwade231

@miketopher

I have just had the same issue yesterday and found the solution today. http://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: 'http://rogerlear.co.uk/bbbclip-BL-480x270.mp4' },
		   { file: 'http://rogerlear.co.uk/bbbclip-BL-480x270.webm' }
            ],
	    image: 'http://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.

Where does this display at? in the back-end? Is there a way to attach it to profile in the fron-tend via custom link?