Assuming the below HTML with the video class on the modal and the video URL as the data attribute on the video content.

01-modal_content.html

<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>

02-scripts.js

$("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', '');
});

03-styles.css

/* 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%;
}