HTML5 CSS Video Tag inside div - css

Question

I im using bootstrap modal plugin that i want to put to background animated mp4 video...how can i put in modal that so that video is shows from top to bottom in modal dialog..i have this html code:
<div class="modal fade in" id="user" role="dialog" aria-hidden="false" style="display: block;">
<div class="modal-dialog modal-sm">
<!-- page videocontent -->
<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, expire to create 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 username -->
<div class="form-group">
<label for="username" class="control-label">Username *</label>
<div class="col-sm-8">
<input type="text" class="form-control parsley-validated" id="username" parsley-trigger="change" parsley-required="true" parsley-minlength="4" parsley-validation-minlength="1">
</div>
</div>
<!-- form password -->
<div class="form-group">
<label for="password" class="control-label">Password *</label>
<div class="col-sm-8">
<input type="text" class="form-control parsley-validated" id="password" parsley-trigger="change" parsley-required="true" parsley-minlength="4" parsley-validation-minlength="1">
</div>
</div>
<!-- form mac -->
<div class="form-group">
<!-- label mac -->
<label for="mac" class="control-label">MAC</label>
<!-- input mac -->
<div class="col-sm-8">
<input type="text" class="form-control parsley-validated" id="mac" parsley-trigger="change" parsley-minlength="4" parsley-type="mac" parsley-validation-minlength="1">
</div>
</div>
<!-- form expire -->
<div class="form-group">
<!-- label expire -->
<label for="expire" class="control-label">Expire *</label>
<!-- input expire -->
<div class="col-sm-8" id="expire">
<select class="chosen-select chosen-transparent form-control parsley-validated" id="expire" parsley-trigger="change" parsley-required="true" parsley-error-container="#selectbox" style="display: none;">
<option value="">Please choose</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select><div class="chosen-container chosen-container-single chosen-container-single-nosearch" style="width: 0px;" title="" id="expire_chosen"><a class="chosen-single" tabindex="-1"><span>3</span><div><b></b></div></a><div class="chosen-drop"><div class="chosen-search"><input type="text" autocomplete="off" readonly=""></div><ul class="chosen-results"><li class="active-result result-selected" style="" data-option-array-index="0">Please choose</li><li class="active-result" style="" data-option-array-index="1">1</li><li class="active-result" style="" data-option-array-index="2">2</li><li class="active-result result-selected" style="" data-option-array-index="3">3</li><li class="active-result" style="" data-option-array-index="4">4</li><li class="active-result" style="" data-option-array-index="5">5</li></ul></div></div>
</div>
</div>
<!-- form bouquet -->
<div class="form-group">
<!-- label bouquet -->
<label for="bouquet" class="control-label">Bouquet *</label>
<!-- input bouquet -->
<div class="col-sm-8" id="bouquet">
<select class="chosen-select chosen-transparent form-control parsley-validated" id="bouquet" parsley-trigger="change" parsley-required="true" parsley-error-container="#selectbox" style="display: none;">
<option value="">Please choose</option>
<option value="1">BOUQUET1</option>
<option value="2">BOUQUET2</option>
<option value="3">BOUQUET3</option>
</select><div class="chosen-container chosen-container-single chosen-container-single-nosearch" style="width: 0px;" title="" id="bouquet_chosen"><a class="chosen-single" tabindex="-1"><span>BOUQUET4</span><div><b></b></div></a><div class="chosen-drop"><div class="chosen-search"><input type="text" autocomplete="off" readonly=""></div><ul class="chosen-results"><li class="active-result result-selected" style="" data-option-array-index="0">Please choose</li><li class="active-result" style="" data-option-array-index="1">Ex-Yu</li><li class="active-result" style="" data-option-array-index="2">Mega</li><li class="active-result result-selected" style="" data-option-array-index="3">MAG250 MEGA</li></ul></div></div>
</div>
</div>
<!-- form notes -->
<div class="form-group">
<!-- label notes -->
<label for="notes" class="control-label">Notes</label>
<!-- textbox notes -->
<div class="col-sm-8">
<textarea class="form-control parsley-validated" id="notes" rows="3" parsley-trigger="keyup" parsley-rangelength="[0,200]" parsley-validation-minlength="1"></textarea>
</div>
</div>
<!-- form options -->
<div class="form-group">
<!-- label options -->
<label class="control-label">Options</label>
<!-- checkbox options -->
<div class="col-sm" id="options">
<div class="checkbox check-transparent">
<input type="checkbox" value="1" id="adult" parsley-group="adult" parsley-trigger="change" parsley-required="true" parsley-mincheck="2" parsley-error-container="#adult .last" class="parsley-validated parsley-error">
<label for="adult">Adult</label>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<!-- modal-footer buttons -->
<div class="col-sm-8">
<button type="submit" class="btn btn-default">OK</button>
<button type="reset" class="btn btn-default cancel">Cancel</button>
</div>
</div>
</div>
</div>
i need to show video tag in modal-dialog modal-sm class so that video is displayed in whole modal, i set in video tag width: 640 and height 480 but it is shows only in modal-body class and i don't know how to expand whole video object to whole div object.

Answer 1

Try this:
add this to your CSS File:
.videoAdd {
position: absolute;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
background-size: cover;
overflow: hidden;
}
and in HTML file try adding this Div and add the video tag inside it:
<div class="wrapper">
<video class="videoAdd">
<source src="yourVideoSrc" type="video/mp4">
<source src="anotherVideoSrc" type="video/ogg">
</video>
</div>