jQuery Tubular YouTube Video Not Loading On WordPress Site

July 9th, 2013 - Posted by Steve Marks to Javascript / jQuery, PHP, Web Development.

Normally I like to think I’m quite a calm and relaxed person. Or so I thought until I came across this problem when I was on the verge of throwing the PC out of the window. Ok, maybe that’s a little extreme, but after spending about 5 hours looking into this problem I was really starting to get quite p***ed off.

Allow me to explain….

The Problem

The scenario is as follows; I have a site built in WordPress that is using the jQuery plugin Tubular. The Tubular plugin lets you set a YouTube video as your page background which was working fine and looked great… when it worked.

That’s exactly the problem though, it only worked about 10% of the time. The rest of the time it just wouldn’t load the video with no errors or anything else to suggest why. I tested across multiple browsers with the same result in all of them.

The Cause

After trying absolutely everything something struck me; I don’t have this problem when viewing the demo site. It’s exactly the same plugin, yet I don’t experience the problem with the video not loading when viewing the example, no matter how many times I refreshed.

It just had to be something related to my site so I started to look at the HTTP headers in the request. I compared the headers on my site to the ones on the demo site and could see there was a clear difference when it came to caching (or lack of). The other thing I noticed was that these headers on my site were only set when logged into WordPress. As soon as I logged out the headers disappeared and the video worked everytime.

The Solution

To be honest, I don’t have a solution as of yet to solve this problem once and for all. If you’re also experiencing this problem I think you have one of two options:

1) Suck it and see – You know it works when not logged into WordPress so the average user won’t have this problem.

2) Edit /wp-includes/functions.php – On line 905 (I was using WordPress 3.5.1) of /wp-includes/functions.php it sets the headers relating to caching:

function wp_get_nocache_headers() {
    $headers = array(
        'Expires' => 'Wed, 11 Jan 1984 05:00:00 GMT',
        'Cache-Control' => 'no-cache, must-revalidate, max-age=0',
        'Pragma' => 'no-cache',
    );

    if ( function_exists('apply_filters') ) {
        $headers = (array) apply_filters('nocache_headers', $headers);
    }
    $headers['Last-Modified'] = false;
    return $headers;
}

You could comment these out, however, do so at your own risk. Note that this file will be replaced when you next upgrade the WordPress version, erasing your changes.

I’ll update this post should I find a solution in the future, however please feel free to comment and let me know if you discover a way around this in the meantime.

This entry was posted on Tuesday, July 9th, 2013 at 12:10 pm by +Steve Marks and is filed under Javascript / jQuery, PHP, Web Development. You can follow any responses to this entry through the RSS 2.0 feed.
Comments...

Fear not, we won't publish this

Comments (1)
  1. Ripul says:

    Thanks. This helped me …