Display html5 video tag in colorbox lightbox

Question

I´m trying to display an HTML5 with a colorbox lightbox. The way I´m doing it is something like this:

var html ='<video>'+sources+'</video>';
$.colorbox({html:html});

where sources is a variable that contains the html of the source tags. My problem is that even though the colorbox lightbox appears, the video doesn't show. I've checked with Firebug and the whole html is there. Any idea why it might not show it?

Thanks.

Answer 1

You can display it using the inline html mode

$( document ).ready( function() {
    $( '#openColorbox' ).colorbox( {
        inline  : true, 
        width   : '80%', 
        height  : 'auto', 
        href    : '#inlinevideocontent'
    } );
} );

and here is your inline div

<div style='display:none'>
        <div id='inlinevideocontent' >
        <video controls="controls" src="video.mp4" />
        </div>
</div>