Why exchanged the video.js style in a ajax ServerInterval upgrade in WordPress?

Question

I have a ajax script which get a new article and changes on my blog.

The PHP part starts with this:

<?php include($_SERVER["DOCUMENT_ROOT"] . "/wp-blog-header.php"); ?>

The other part:

 <div id="content" <?php cyberchimps_filter_content_class(); ?>>
        
        <?php do_action( 'cyberchimps_before_content'); ?>
        
        <?php if ( have_posts() ) : ?>
            
            <?php while ( have_posts() ) : the_post(); ?>

                <?php get_template_part( 'content',     get_post_format() ); ?>
                
            <?php endwhile; ?>
            
        <?php elseif ( current_user_can( 'edit_posts' ) ) : ?>

            <?php get_template_part( 'no-results', 'index' ); ?>

        <?php endif; ?>
        
        <?php do_action( 'cyberchimps_after_content'); ?>
        
    </div>      

And ajax:

<script>
 (function($) {
    $(document).ready(function() {
      var refreshId = setInterval(function()
      {
      $('#content').load('<? echo get_bloginfo('template_directory'); ?>/new.php');
    }, 30000);
  });
})(jQuery);

When the page refresh in ajax (this happen in every 30 second) the video.js never comeback, just I get this awful player:

http://i39.tinypic.com/mmycyd.png

My pretty player looks like this:

http://i41.tinypic.com/xm6894.png

Here my site: neocsatblog.mblx.hu

How to fix this?

Answer 1

The video.js you have at that page isn't the file the video.js tag relates to. It looks like this is what you meant to use however, as you use data-setup="{}" on the video element.

Add the video.js script and css to your page:

<link href="//vjs.zencdn.net/4.2/video-js.css" rel="stylesheet">
<script src="//vjs.zencdn.net/4.2/video.js"></script>

If you're adding videos to the DOM after the page is loaded (e.g. by ajax) also see "Alternative Setup for Dynamically Loaded HTML" in the video.js docs. Basically, after the <video> element has been added, do

videojs("your_video_element_id", {}, function(){
  // Player (this) is initialized and ready.
});