StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>The function or plugin you use to display the popup window will probably be different from what you are using to display the video. In this example I used the <a href="http://flowplayer.org/tools/demos/overlay/index.html" rel="noreferrer">Overlay Plugin from jQuery Tools</a> to display the modal then used <a href="http://code.google.com/p/swfobject/" rel="noreferrer">swfobject</a> to display the YouTube Flash Player. Alternatively, you could use an <a href="http://henriksjokvist.net/archive/2009/2/using-the-html5-video-tag-with-a-flash-fallback" rel="noreferrer">HTML5 video player with Flash fallback</a> to display the video, but you would still need it to popup your modal first.</p> <pre><code><a href="http://www.youtube.com/v/2cxqZiWyW3g&hl=en_US&fs=1&autoplay=1" class="video-link">Video 1</a> <a href="http://www.youtube.com/v/607RMNoJfl4&hl=en_US&fs=1&autoplay=1" class="video-link">Video 2</a> <div class="modal" id="video-modal"> <div id="video-container" style="width: 425px; height: 344px;"></div> </div> <script language="javascript" type="text/javascript"> $(function() { var videoModal = $('#video-modal').overlay({ expose: { color: 'black', loadSpeed: 200, opacity: 0.85 }, closeOnClick: true, api: true }); $('.video-link').click(function() { videoModal.load(); var videoUrl = $(this).attr('href'); var flashvars = {}; var params = { allowFullScreen: "true", allowscriptaccess: "always" }; var attributes = {}; swfobject.embedSWF(videoUrl, 'video-container', '425', '344', '9.0.0', '', flashvars, params, attributes); return false; }); }); </script> </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload