Skip to content

Instantly share code, notes, and snippets.

@M4R14
Last active August 17, 2017 03:32
Show Gist options
  • Select an option

  • Save M4R14/933bb6bd555bdf48b2b0b252abbd4f45 to your computer and use it in GitHub Desktop.

Select an option

Save M4R14/933bb6bd555bdf48b2b0b252abbd4f45 to your computer and use it in GitHub Desktop.
Got a YouTube video thumbnail
<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>
<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>
.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;
}
<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" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment