JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://www.ttmt.org.uk/bootstrap/css/bootstrap.css">
<script src="http://www.ttmt.org.uk/bootstrap/js/bootstrap.js"></script>
<!-- video player -->
    <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content embed-responsive embed-responsive-16by9">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                </div>
                <div class="modal-body">

                  <iframe width="1000" height="528" frameborder="0" allowfullscreen="" class="embed-responsive-item"></iframe>

                </div>
            </div>
        </div>
    </div>
    <!-- video player -->

	<div class="container-fluid">
		<div clas="row">

			<button class="js-play" data-vid="105100455">Video</button>

		</div>	

	</div>

CSS

button.close{
  font-size:2em;
  position: absolute;
  top: 5px;
  opacity: 1;
}

.modal-dialog{
  margin: 150px auto;
  width: 1000px;
  max-width:90%;
  min-width:300px;
}

.modal-body {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0; 
    overflow: hidden;
}

.modal-body iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

JavaScript

$('.js-play').click(function(){

      var vid_num = $(this).data('vid');
      var vid_src = 'https://player.vimeo.com/video/'+vid_num;
      $('#myModal').modal('show');
      $('#myModal iframe').attr('src', vid_src);
  })