Got a YouTube video thumbnail

index.html

<div class="clip" >
  <a href="https://www.youtube.com/watch?v=GgswDxplkWM"/>
    <span class="play-btn" data-toggle="modal" data-target="#exampleModal">
      <i class="fa fa-play fa-5x" aria-hidden="true"></i>
    </span>
  <a/>
</div>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

jlyvkm.markdown

jLYVKm

A Pen by MarkVachi on CodePen. License.

• How do I get a YouTube video thumbnail from the YouTube API?

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>

style.css

.clip {
    background-image: url(https://img.youtube.com/vi/GgswDxplkWM/sddefault.jpg);
    width: 400px;
    height: 300px;
    background-position: center;
    background-size: contain;
    position: relative;
}

.play-btn {
    position: absolute;
    top: 36%;
    left: 41%;
    cursor: pointer;
  color: #ff3c41;
}

.play-btn:hover {
    position: absolute;
    top: 36%;
    left: 41%;
  color: white;
}

styles

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />