How to preview uploaded video in a lightbox in webpage

i have encountered this problem while i was trying to code this feature for Image/Video Uploading.

This is my code:

<div class="col-md-3" id="div1" runat="server" visible="false">
                <video width="250" id="vid1" rel="lightbox" controls="controls" runat="server" visible="false">
                    <source src="~" type="video/mp4" runat="server" id="v1" />
                    Your browser does not support HTML5 video.
                </video>
                <asp:HyperLink ID="href01" class="thumbnail" rel="lightbox" runat="server" Target="_blank">
                    <asp:Image ID="Image1" runat="server" CssClass="img-thumbnail" Height="200" Width="250" ImageUrl="~/Image.gif" />
                </asp:HyperLink>
            </div>

Basically, if the upload is a picture, only id:href01 will be visible and if it is video id:vid1 will be visible. So for the image preview, i am using Slimbox2 to do the javascript in which it will be like a popup kind. But now i can't find a way to do the video preview because of all the stuffs i try to import wouldn't preview. Do you guys have any idea of what to use for this scenario? Most probably the client will upload .mp4 video files.

Thanks alot for your help.