Can I use Jquery for Popup Video? Any recommendations?

JavaScript
1

Hi people,

I have a video (not a youtube vid) that i need to display as a popup on my home page its like an advertisement/commercial.

Can anyone recommend a jquery plugin that will achieve this?

What im looking to do is have the video popup once the home page is loaded but also have an option for the user to close the video at any time if they wish to do so.

Any advice on the best way to go about this would be welcome.

Thanks guys n girls.

2

jQuery-UI Dialog box will do this easily. You don’t need to include the entire jQuery-UI Library if this is all you need, just be sure to uncheck all the other functions you don’t need when you download it.

3

Thanks for your help mawburn.

I used the jquery-UI dialog box and the video seems to work ok on firefox locally.

However once uploaded to my server it dont seem to perform so well.

Maybe it could be to do with the file size (1.81 MB) or maybe the html5 video tag i used.

Also In chrome i cant seem to get the video to autoplay.

Not sure if i should scrap the video now or keep working on the bugs…

Anyway here is my code if you or anyone else dont mind having a quick look to see if ive made any obvious errors:

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#dialog-modal" ).dialog({
height: 315,
width:	380,
modal: true,
resizable: false
});
});
</script>

<div id="dialog-modal" title="My Video">
<video controls="controls" autoplay="autoplay">
  <source src="video/Add_x264.mp4" type="video/mp4" />
  <source src="video/Add_libtheora.ogv" type="video/ogg" />
  <source src="video/Add_VP8.webm" type="video/webm" />
  Looks like your browser is out of date. To view this video please update to the latest version of your web browser.
</video>
</div>

Many thanks in advance.