video section

index.html

     
      <div class="container">
        <div class="row">
          <div class="col-md-12">
             <h1 class="text-primary">Event Videos</h1><br>
          </div>
        </div>
        <div class="row">
          <div class="col-md-4 event"><button type="button" class="gradient-css" role="button" data-toggle="modal" data-target="#myModal"><i data-feather="play-circle"></i> Play</button></div>
          
  
   <div class="col-md-4 event"><button type="button" class="gradient-css" data-toggle="modal" data-target="#basicModal"><i data-feather="play-circle"></i> Play</button></div> <div class="col-md-4 event"><button type="button" class="gradient-css" data-toggle="modal" data-target="#basicModal2"><i data-feather="play-circle"></i> Play</button></div>
      </div>
    </div>
    

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
    
            <div class="modal-body" id="yt-player">
               <iframe width="560" height="315" src="https://www.youtube.com/embed/WdeFxB_ZibU?controls=0&amp;&amp;showinfo=0" frameborder="0"allow="autoplay; encrypted-media" allowfullscreen></iframe>
            </div>
        </div>
    </div>
</div>

script.js

feather.replace();
$(".event").click(function() {
  $('#myModal').modal('toggle')
});
   $("#myModal").on('hidden.bs.modal', function (e) {
        $("#myModal iframe").attr("src", $("#myModal iframe").attr("src"));
    });

scripts

<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js"></script>

style.css

body {
  background-color: #dae2e0;
  text-align: center;
}

.text-primary {
  color: #25A8DF!important;
}

.container {
  text-align: center;
  padding: 30px;
}

.col-md-4 {

   -moz-box-shadow:    inset 0 0 10px #dae2e0;
   -webkit-box-shadow: inset 0 0 10px #dae2e0;
   box-shadow:         inset 20px 0 0 #dae2e0;
}


.feather{
  vertical-align: middle;
  width: 30px;
  height: 30px;
  padding-bottom:5px;
}

.feather:hover {
  color: #fff;
}

.event {
      width: 100%;
    padding-top: 80px;
    height: 200px;
    background: linear-gradient(to left, rgba(0, 0, 0, .6) 50%, rgba(0, 0, 0, .5) 100%), url(https://blogmedia.evbstatic.com/wp-content/uploads/wpmulti/sites/8/2018/01/15155312/iStock-667709450.jpg);
    background-repeat: no-repeat;
    background-size: cover;
  cursor: pointer;
/*   filter: grayscale(100%); */
}



.gradient-css {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  width: 110px;
  height: 35px;
  cursor: pointer;
  margin: 0 auto;
  border: 2.3px solid #00E7FF;
  -webkit-border-radius: 40px;
  border-radius: 40px;
  font: normal 20px/30px "Advent Pro", Helvetica, sans-serif;
  font-weight: bold;
  color: #00E7FF;
  text-align: center;
  vertical-align: middle;
  -o-text-overflow: clip;
  text-overflow: clip;
  letter-spacing: 1px;
  background: rgba(0,0,0,0);
  -webkit-transition: background-color 0.3s cubic-bezier(0, 0, 0, 0), color 0.3s cubic-bezier(0, 0, 0, 0), width 0.3s cubic-bezier(0, 0, 0, 0), border-width 0.3s cubic-bezier(0, 0, 0, 0), border-color 0.3s cubic-bezier(0, 0, 0, 0);
transition: .5s;
}

.gradient-css:hover {
  color: rgba(255,255,255,1);
    background: linear-gradient(to left, #00E7FF, #25A8DF);

}

.gradient-css:active {
  border:   background: linear-gradient(to left, #00E7FF, #3273dc);

  background:     background: linear-gradient(to left, #00E7FF, #3273dc);


  -webkit-transition: none;
  -moz-transition: none;
  -o-transition: none;
  transition: none;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />

video-section.markdown

video section

A Pen by Yaakov Shore on CodePen.

License.