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

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
Subscribe for our monthly newsletter for updated articles and useful code scripts.

Share It

comments powered by Disqus