Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Fix lag in video player loading WordPress


I show videos on my site using JWPlayer, embedded via ProPlayer plugin.

This is in the Video tab at the top of the sidebar [[LINK href=""]]here[[/LINK]]. Even long after the page is loaded, the player takes 1-2 seconds to appear after the tab is clicked. This looks bad and means the player doesn't appear to fade in like the other tabs do when clicked.

I suspect that this has to do with when or how the js appears in the HTML (instead of a basic object embed, it uses javascript and swfobject.js).

The developer said this when I asked about this in an email:
<blockquote>Proplayer tries to load after the page loaded. You can play with scripts a little bit to make it load in the head block. That should give you the result you are expecting.

What do I need to change in the the ProPlayer plugin/js so that there's no lag and so the video player smoothly fades in when the tab is clicked?

Answers (5)


Christianto answers:

Hi web559,

That lag in the flash player because it will start initialize when its wrapper display css set to block, to fix this you have to change way tab work.

Jerson has pointed out by manipulating visibility instead of css display property.

My solution is by manipulating height + fadeTo so it will similar to the how default tabs work ie fade that will fit your requirement.

Please try it, change jwTabs.js with file attach..

web559 comments:

Thanks Christianto, I'll try it now.

web559 comments:

This works perfectly.

For future reference, how would I use a transition like fadeToggle on an element that's hidden via your method, .css({height:0,overflow:'hidden'}), instead of .hide() or display:none? When I try to use fadeToggle (or .slideToggle(), etc) on an element that's hidden with your method instead of display:none, it always hides it first instead of displaying.


Romel Apuya answers:


The reason why you have a lag when you click on the video to play,is because
the video isn't streamed. So you need to have that the video is streamed while the website is loading,
but you don't auto play it. To pre-buffer, you have to start playing the file when your html loads, then pause the player.


Graham Kite answers:

The problem could be the page load sequence.
It depends on where the scripts are loading from.
Wordpress loads from the top down, It possibly has to wait until a lot of other scripts load.

Try some of these.

if you are on firefox add yslow and pagespeed. You can also try a cache plugin, but the answer is likely to be in where your scripts load and the order.
Try some of these and look at the minify settings, It should tell you the order of your load and
W3cache or wpminify should be able to give the option of changing the order of your load and also minify your code.

Basically the developer is correct it probably is loading from the bottom. The minify plugin should allow you to change the order and position of where it loads from and also combine the scripts so it only loads a minimal number of scripts. (does not change the actual scripts and code, only the way they render and load.)

PS I didn't see the video either.


ej_emman answers:

try to preload your videos. use some javascript to do this.


Jerson Baguio answers:

try to replace your jwTabs.js with this code just make sure you have a back up copy of your jWtabs.js(function($) {

$.fn.jwTabs = function(options) {

var options = $.extend({
fade : null,
tabTitleReference : null,
interval : null,
startTab : 1,
tabContainerName : 'tab-items'
}, options);

return this.each(function() {

var $this = $(this),
divCount = $this.children('div').length,
tabContainer = '<ul id="' + options.tabContainerName + '">';

.children('div:not(:nth-child(' + options.startTab + '))')
.hover(function() {
}, function() {

for (var i = 1; i <= divCount; i++) {
if( options.tabTitleReference ) {
var heading = $this
.children('div:nth-child(' + i + ')')

if( heading !== '' ) tabContainer += '<li><a href="#" rel="' + i + '">' + heading + '</a></li>';
else tabContainer += '<li><a href="#" rel="' + i + '">' + i + '</a></li>';
else tabContainer += '<li><a href="#" rel="' + i + '">' + i + '</a></li>';
tabContainer += '</ul>';

var $container = $('#' + options.tabContainerName);

.find('li:nth-child(' + options.startTab + ')')
.click(function() {
var $a = $(this);

var num = $a.attr('rel');
if( $this
.eq(num - 1)
) return false; // user is already on selected tab



if( options.fade ) {
.eq(num - 1)

else {
.eq(num -1)

return false;

// auto change tabs
if( options.interval ) {
var i = options.startTab;

setInterval(function() {

if( !$this.hasClass('hovered') ) {
if( i === divCount ) i = 0;

}, options.interval);

}); // end each