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>
<div class="wrap">

    <div class="container">

      <div class="row">

        <div class="glyphicon glyphicon-play" data-toggle="modal" data-target="#myModal"></div>

          <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 src="https://player.vimeo.com/video/99676584?title=0&amp;byline=0&amp;portrait=0" width="1000" height="528" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen class="embed-responsive-item"></iframe>'
                  
                      </div>
                  </div>
              </div>
          </div>

      </div>

    </div>

  </div><!--wrap-

CSS

.glyphicon-play{
      color: red;
      font-size: 4em;
      margin: 50px 0 0 0;
    }
    .modal-dialog{
      margin: 150px auto;
    }

    
    button.close{
      font-size:30px;
      position: absolute;
      top: 5px;
    }
    .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: 600px;
    }