Use fancybox to pop up the div to bring up the video interface, fancyboxdiv

Use fancybox to pop up the div to bring up the video interface, fancyboxdiv

Fancybox can pop up many forms, or even a small video in swf format. However, these swf videos do not have any controls during playback. Only the tail can be seen or closed at the beginning. We can use fancybox to pop up the div box and html5 to quickly write a code that pops up a small video. First, the effect is shown in. Click the picture to play the video. The background is automatically virtualized.

<Link rel = "stylesheet" type = "text/css" href = "css/fancybox.css"/> <script type = "text/javascript" src = "js/jquery-1.11.3.js"> </script> <script type = "text/javascript" src = "js/jquery. fancybox-1.3.1.pack.js & gt; </script & gt; <script type = "text/javascript" src = "js/main. js "> </script>

Then the html section

<A id = "showdiv1" href = "# box1" title = "test">  </a> <! -- Stores the playback icons, such as img and button. --!> <Div style = "display: none"> <! -- Hide div first --!> <Div id = "box1"> <video id = "movie" src = "movie/1. MP4 "controls =" controls "preload =" meta "> </video> </div>

The last part is the js part.

$(document).ready(function(){    $("#showdiv1").fancybox({        padding:0,        hideOnOverlayClick:false,        fitToView:false,        autoSize:true,        closeClick:true,        openEffect:"none",        closeEffect:"none",        "onClosed":function(){window.document.location.reload(true)},        centerOnScroll:true    })});

At last, you can make some changes to achieve the desired effect.