Skip to content

Instantly share code, notes, and snippets.

@grand-lotus-iroh
Created February 16, 2018 22:51
Show Gist options
  • Save grand-lotus-iroh/087f9913f8eaa4e1b695b8631c5d918c to your computer and use it in GitHub Desktop.
Save grand-lotus-iroh/087f9913f8eaa4e1b695b8631c5d918c to your computer and use it in GitHub Desktop.
Bootstrap 3 Modal with HTML5 video
<div class="btn-group">
<button class="btn btn-link" data-target="#modal-sample" data-toggle="modal" type="button">90 second video tutorial</button>
</div>
<div aria-hidden="true" aria-labelledby="modal-sample-label" class="modal theme-alt modal-center-vertical" id="modal-sample" role="dialog" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="modal-sample-label">Dialog title</h4>
</div>
<div class="modal-body">
<video controls="" id="video1" style="width: 100%; height: auto; margin:0 auto; frameborder:0;">
<source src="/media/autoplay-video.webm" type="video/webm">
<source src="/media/autoplay-video.ogg" type="video/ogg">
<source src="/media/autoplay-video.mp4" type="video/mp4">
Your browser doesn't support HTML5 video tag.
</video>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button">Button</button> <button class="btn btn-info" data-dismiss="modal" type="button">Cancel</button>
</div>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment