Skip to content

Instantly share code, notes, and snippets.

@captproton

captproton/bootstrap-video-modal-popup.markdown

Last active November 22, 2020 22:14
Show Gist options
  • Save captproton/b48b9df68bd055c63adb903aa6ccc959 to your computer and use it in GitHub Desktop.
Save captproton/b48b9df68bd055c63adb903aa6ccc959 to your computer and use it in GitHub Desktop.
Download ZIP
Bootstrap Video Modal Popup
Raw
bootstrap-video-modal-popup.markdown

Bootstrap Video Modal Popup

Responsive video inside bootstrap modal. Also includes play/pause once user clicks on the trigger or close button.

A Pen by Angel Centeno on CodePen.

License.

Raw
index.html
<body>
<section class="text-center">
<h1>click on image below</h1>
<img data-toggle="modal" data-target="#homeVideo" class="img-responsive" src="http://www.gossettmktg.com/video/dangot.png" onclick="playVid()" />
</section>
</body<
<!-- Home Video Modal -->
<div class="modal fade" id="homeVideo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<button type="button" class="btn btn-default" data-dismiss="modal" onclick="pauseVid()">X</button>
<div class="embed-responsive embed-responsive-16by9">
<video id="gossVideo" class="embed-responsive-item" controls="controls" poster="http://www.gossettmktg.com/video/dangot.png">
<source src="http://www.gossettmktg.com/video/dangot.mp4" type="video/mp4">
<source src="http://www.gossettmktg.com/video/dangot.webm" type="video/webm">
<source src="http://www.gossettmktg.com/video/dangot.ogv" type="video/ogg">
<object type="application/x-shockwave-flash" data="https://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="353" height="190">
<param name="movie" value="https://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
<param name="allowFullScreen" value="true"> <param name="wmode" value="transparent">
<param name="flashVars" value="config={'playlist':['http%3A%2F%2Fwww.gossettmktg.com%2Fvideo%2Fdangot.png',{'url':'http%3A%2F%2Fwww.gossettmktg.com%2Fvideo%2Fdangot.mp4','autoPlay':false}]}">
<img alt="Big Buck Bunny" src="http://www.gossettmktg.com/video/dangot.png" width="353" height="190" title="No video playback capabilities, please download the video below">
</object>
</video>
</div>
</div>
</div>
</div>
Raw
script.js
var vid = document.getElementById("gossVideo");
function playVid() {
vid.play();
}
function pauseVid() {
vid.pause();
}
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
Raw
style.css
body {
background-color: #30b3f2;
}
h1 {
color: #fff;
}
section {
padding-top: 2em;
padding-bottom: 2em;
}
section h1 {
margin-bottom: 1em;
}
section img {
border: #ddd solid 1px;
border-radius: 5px;
}
#homeVideo button.btn.btn-default {
background: black;
border-radius: 50%;
position: absolute;
right: 0;
z-index: 5;
color: white;
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment