Skip to content

Instantly share code, notes, and snippets.

@jamiehs
Last active August 29, 2015 13:55
Show Gist options
  • Save jamiehs/8789553 to your computer and use it in GitHub Desktop.
Save jamiehs/8789553 to your computer and use it in GitHub Desktop.
Assuming the below HTML with the video class on the modal and the video URL as the data attribute on the video content.
<a data-toggle="modal" data-target=".bs-modal-lg">Open Modal</a>
<div class="modal fade bs-modal-lg video" tabindex="-1" role="dialog" aria-labelledby="VideoModal" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content" data-video-url="//player.vimeo.com/video/84747519?portrait=0&amp;byline=0&amp;title=0&amp;autoplay=1">
<div class="fve-video-wrapper fve-image-embed fve-thumbnail-image youtube" style="padding-bottom:56.25%;">
<iframe src="" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>
</div>
</div>
$("div.video.modal").on('show.bs.modal', function(event){
var videoURL = $(this).find('.modal-content').data('video-url');
$(this).find('iframe').attr('src', videoURL);
})
.on('hide.bs.modal', function(event){
$(this).find('iframe').attr('src', '');
});
/* Thanks to Web Designer Wall for writing about this technique: http://webdesignerwall.com/tutorials/css-elastic-videos */
/* And to A List Apart: http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/ */
.fve-video-wrapper {
position: relative;
overflow: hidden;
height: 0;
background-color: transparent;
padding-bottom: 56.25%; /* This is default, but will be overriden */
margin: 0.5em 0; /* A bit of margin at the bottom */
}
.fve-video-wrapper iframe,
.fve-video-wrapper object,
.fve-video-wrapper embed {
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment