I am currently using the Bootstrap modal plugin and I would like to incorporate a background animated mp4 video. How can I achieve this within the modal dialog where the video will be displayed from top to bottom? Below is the HTML code I have:
<div class="modal fade in" id="user" role="dialog" aria-hidden="false" style="display: block;">
<div class="modal-dialog modal-sm">
<!-- page video content -->
<video preload="auto" autoplay="autoplay" loop="loop" width="640" height="480">
<!-- video files -->
<source src="./vid/1.mp4" type="video/mp4">
<source src="./vid/1.webm" type="video/webm">
<source src="./vid/1.ogv" type="video/ogg">
</video>
<!-- modal content -->
<div class="modal-content">
<div class="modal-header">
<div class="modal-header-left">
<h3>Add User</h3>
<p>Enter username, password, bouquet, and expiration date to create a user:</p>
</div>
<div class="modal-header-right">
<i class="fa fa-user-pencil fa-2x"></i>
</div>
</div>
<!-- modal body -->
<div class="modal-body">
<form class="form-horizontal" role="form">
<!-- form elements -->
...
</form>
</div>
<div class="modal-footer">
<!-- modal-footer buttons -->
...
</div>
</div>
</div>
</div>
I'm looking to display the video tag within the modal-dialog modal-sm class so that the video spans across the entire modal. Despite setting the width to 640 and height to 480 in the video tag, it only appears within the modal-body class, and I'm unsure how to expand the video object to cover the entire div element.