How to use Modalbox to show youtube video in a popup
Its the era of videos. There is often a need to show videos in popup windows. Modal box makes it extremely easy to show youtube or metacafe videos.
Examples
- Youtube Video via
URL
This example uses embed url of a youtube video.
- Youtube Video via inline
This example uses embed code provided by youtube.
Code
Html
<ul class="unstyled"> <li><a href="http://www.youtube.com/embed/e90C41jo5m4" id="iframe">Youtube Video via URL</a><p> This example uses embed url of a youtube video.</p> </li> <li><a href="#inlinevideo" id="inline">Youtube Video via inline</a><p> This example uses embed code provided by youtube.</p> <div id="inlinevideo" style="width: 100%; display: none;"> <iframe width="100%" height="100%" src="http://www.youtube.com/embed/e90C41jo5m4" frameborder="0" allowfullscreen></iframe> </div> </li> </ul>
Script
<link href="modal.css" rel="Stylesheet" /> <link href="modal-darktheme.css" id="modaltheme" rel="Stylesheet" /> <script src="modal.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { $("#inline").modalbox({ Type: 'inline', Width: 530, Height: 430 }); $("#iframe").modalbox({ Type: 'iframe', Width: 530, Height: 430 }); }); </script>License & Download ModalBox