JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://vjs.zencdn.net/4.10/video-js.css">
<script src="http://vjs.zencdn.net/4.10/video.js"></script>
<link rel="stylesheet" href="//cdn.rawgit.com/noelboss/featherlight/1.0.3/release/featherlight.min.css">
<script src="//cdn.rawgit.com/noelboss/featherlight/1.0.3/release/featherlight.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<a href="#" id="video-toggler">Open element in lightbox</a>
<div class="lightbox embed-responsive embed-responsive-4by3" id="video-lightbox" preload="none">
</div>
CSS
.lightbox {
display: none;
}
#video-player {
max-width: 900px;
max-height: 500px;
margin: 0 auto;
}
JavaScript
$(document).ready(function () {
var player = null;
$("#video-toggler").click(function () {
$.featherlight($(createPlayerDOM()), {
afterOpen: function (event) {
player = videojs('#video-player', {"controls": true, "autoplay": false, "preload": "auto" });
},
beforeClose: function (event) {
player.pause();
player.dispose();
}});
});
/*
*
*/
function createPlayerDOM() {
var playerContainer = null;
playerContainer = document.createElement('div');
var p = document.createElement('h1');
p.innerHTML = "See me. This is a test";
/*
THIS IS THE LINE:
*/
//playerContainer.appendChild(p);
var playerDOM = null;
playerDOM = document.createElement('video');
playerDOM.id = 'video-player';
playerDOM.style.width = '100%';
playerDOM.className += 'video-js ';
playerDOM.className += 'vjs-default-skin';
playerDOM.setAttribute('preload', 'meta_data');
playerDOM.controls = true;
// Create the video sources
var video_mp4 = document.createElement('source');
video_mp4.setAttribute('src', 'http://video-js.zencoder.com/oceans-clip.mp4');
video_mp4.setAttribute('type', 'video/mp4');
var video_webm = document.createElement('source');
video_webm.setAttribute('src', 'http://video-js.zencoder.com/oceans-clip.webm');
video_webm.setAttribute('type', 'video/webm');
var video_ogg = document.createElement('source');
video_webm.setAttribute('src', 'http://video-js.zencoder.com/oceans-clip.ogv');
video_webm.setAttribute('type', 'video/ogg');
playerDOM.appendChild(video_mp4);
playerDOM.appendChild(video_webm);
playerDOM.appendChild(video_ogg);
playerContainer.appendChild(playerDOM);
...