SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2014
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Can I use Jquery for Popup Video? Any recommendations?

    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. #2
    SitePoint Addict bronze trophy mawburn's Avatar
    Join Date
    Apr 2014
    Posts
    281
    Mentioned
    8 Post(s)
    Tagged
    1 Thread(s)
    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.

    https://jqueryui.com/dialog/

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2014
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

    Code HTML4Strict:
    <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>

    Code HTML4Strict:
    <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.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •