There is a task: when you click on the preview, get a video in a modal window.

I implement it as indicated in the code below, but it works only once: if you close it with a mouse click in an empty area or on a cross and click again on the thumbnail, the modal window starts up without content.

< script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" > < /script> <script type="text/javascript " src=" / fancybox / jquery.mousewheel - 3.0.4.pack.js "> </script> <script type=" text / javascript " src=" / fancybox / jquery.fancybox - 1.3.4.pack.js "></script> <script type=" text / javascript "> $(document).ready(function() { $("# content ").fancybox({ 'titlePosition' : 'inside', 'transitionIn' : 'none', 'transitionOut' : 'none' }); }); </script> 
 <!DOCTYPE html> <html lang="en"> <head> <link rel="icon" href="/favicon.ico" type="image/x-icon"> <link rel="stylesheet" type="text/css" href="/fancybox/jquery.fancybox-1.3.4.css" media="screen" /> <link href='css/bootstrap.min.css' rel='stylesheet' media='screen'> <link rel="stylesheet" href="/css/myowncss.css"> <link rel="icon" href="/favicon.ico" type="image/x-icon"> <title>potato</title> </head> <body> <a id="content" href="#potato"> <img src="/video/logo.png" alt="potato"> </a> <div style="display: none; border: 1px"> <div id="potato" style="width:800px; height:auto; overflow:auto;"> <iframe width="800" height="600" src="https://youtu.be/XqXZwgG990I;" frameborder="0" allowfullscreen> </iframe> </div> </div> </body> </html>

  • If you are given an exhaustive answer, mark it as correct (a daw opposite the selected answer). - Nicolas Chabanovsky ♦

2 answers 2

That sketched http://jsfiddle.net/Lejbmeg0/

html

 <a rel="vd" href="https://www.youtube.com/embed/iErGRJ59JOw?autoplay=1" class="iframe"> <img src="http://cs424523.vk.me/v424523302/3a34/U0qJB6B4hJg.jpg" class="img-frame" alt="" /> </a>

css

 http://fancyapps.com/fancybox/source/jquery.fancybox.css

js

 http://fancyapps.com/fancybox/source/jquery.fancybox.js $(".iframe").fancybox({ padding : 10, width : 800, height : 600, 'type':'iframe', 'autoScale':'false' });
  • Thank you very much, your answer made me think about using old versions of fancybox or incorrectly connecting it. Having tested my jsfiddle.net script again, I realized that there it works with the latest versions of files ... and I didn’t specify the last ones. - Budro

If anyone encounters the same problem when the project uses Fancybox 1.3 , and the old version of jq cannot be used.
Here is the patch.