A Pen by Andrew Patton.

index.html

<h1>Testing video.js player creation and disposal</h1>
<button>Open an overlay box with a video inside</button>
<div class="overlay-box">
  <div class="video-holder" data-id="video-1" data-poster="http://www.videojs.com/img/poster.jpg" data-src="http://vjs.zencdn.net/v/oceans.mp4" data-width="640px" data-height="360"></div>
</div>

script.js

jQuery(document).ready(function($) {
	$('button').colorbox({
		inline     : true,
		href       : '.overlay-box',
		width      : '95%',
		height     : '95%',
		onComplete : function() {
			$('#cboxContent').find('.video-holder').each(function() {
				var // Set up our video
					$holder = $(this),
					id      = $holder.data('id'),
					poster  = $holder.data('poster'),
					src     = $holder.data('src'),
					width   = $holder.data('width'),
					height  = $holder.data('height'),
					$video  = $('<video class="video-js vjs-default-skin" id="' + id +
					          '" poster="' + poster + '"><source src="' + src +
					          '" type="video/mp4"></video>').appendTo($holder);

				videojs($video[0], {
					controls : true,
					width    : width,
					height   : height
				}, function() {
					var player = this;
					$(document).one('cbox_cleanup', function() {
						player.dispose();
					});
				});
			});
		}
	});
});

style.sass

@import "compass/css3"
.overlay-box
  display: none
  
  #cboxContent &
    display: block

Video.js-disposal-in-overlay-box.markdown

Video.js disposal in overlay box

Reduced test case for creating and disposing of video.js players in a (colorbox) overlay box.

A Pen by Andrew Patton on CodePen.

License.