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