Video js modal

Video js in a modal window

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://vjs.zencdn.net/4.5/video-js.css">
<script src="http://vjs.zencdn.net/4.5.1/video.js"></script>
<body>
    <div id="wrap">
        <div class="container">
            <a href="#" data-url-mp4="https://detxcdtwkhfz2.cloudfront.net/sherly/5328cde0a87967482689634e/24180.mp4" data-url-flash="http://stream.flowplayer.org/bauhaus/624x260.mp4" data-url-hls="https://detxcdtwkhfz2.cloudfront.net/sherly/5328cde0a87967482689634e/24180.m3u8" class="swap-video">TESTING</a>
            <br/><br/>
            <a href="#" data-url-mp4="http://detxcdtwkhfz2.cloudfront.net/small2.mp4" data-url-flash="http://detxcdtwkhfz2.cloudfront.net/small2.mp4" data-url-hls="https://detxcdtwkhfz2.cloudfront.net/sherly/5328cde0a87967482689634e/24180.m3u8" class="swap-video">TESTING2</a>
        </div>
        <div id="video" class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body">
                        <div id="player" tmp="https://detxcdtwkhfz2.cloudfront.net/small.mp4"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

CSS

/*!
Video.js Default Styles (http://videojs.com)
Version 4.3.0
Create your own skin at http://designer.videojs.com
*/
.vjs-default-skin {
    color: #fafafa;
    cursor: pointer;
}
.vjs-default-skin .vjs-slider {
    outline: 0;
    position: relative;
    cursor: pointer;
    padding: 0;
    background-color: #333;
    background-color: rgba(51, 51, 51, .9);
}
.vjs-default-skin .vjs-slider:focus {
    -webkit-box-shadow: 0 0 2em #fff;
    -moz-box-shadow: 0 0 2em #fff;
    box-shadow: 0 0 2em #fff;
}
.vjs-default-skin .vjs-slider-handle {
    position: absolute;
    left: 0;
    top: 0;
    /* removes slider handles, comment out to restore */
    display:none;
}
.vjs-default-skin .vjs-slider-handle:before {
    content:"\f0c8";
    font-family: FontAwesome;
    font-size: 1em;
    line-height: 1;
    text-align: center;
    position: absolute;
    left:0;
    top: 0;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.vjs-default-skin .vjs-control-bar {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3em;
    background-color: #07141e;
    background-color: rgba(7, 20, 30, .7);
}
.vjs-default-skin.vjs-has-started .vjs-control-bar {
    display: block;
    visibility: visible;
    opacity: 1;
    -webkit-transition: visibility .1s, opacity .1s;
    -moz-transition: visibility .1s, opacity .1s;
    -o-transition: visibility .1s, opacity .1s;
    transition: visibility .1s, opacity .1s;
}
.vjs-default-skin.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
    display: block;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: visibility 1s, opacity 1s;
    -moz-transition: visibility 1s, opacity 1s;
    -o-transition: visibility 1s, opacity 1s;
    transition: visibility 1s, opacity 1s;
}
.vjs-default-skin.vjs-controls-disabled .vjs-control-bar {
    display:...

JavaScript

$(function(){
    var video_player = videojs('player');
    video_player.pause();
    $(".swap-video").click(function(event) {
        event.preventDefault();
        $('#video').modal('show');
        var url_flash = $(this).attr('data-url-flash');
        var url_hls = $(this).attr('data-url-hls')
        video_player.src([
            { type: "video/flv", src: url_flash },
            { type: "application/x-mpegurl", src: url_hls },
        ]);
        video_player.ready(function(){
            video_player.play();
        });
    });
});