Skip to content

Instantly share code, notes, and snippets.

@acusti
Created August 20, 2014 16:20
Show Gist options
  • Save acusti/e4f7e0eb72b208a67aa7 to your computer and use it in GitHub Desktop.
Save acusti/e4f7e0eb72b208a67aa7 to your computer and use it in GitHub Desktop.
A Pen by Andrew Patton.
<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>
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();
});
});
});
}
});
});
@import "compass/css3"
.overlay-box
display: none
#cboxContent &
display: block

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment