Youtube lazy pop-up

by Vladimir

HTML

<script src="https://noelboss.github.io/featherlight/release/featherlight.min.js"></script>
<link rel="stylesheet" href="https://noelboss.github.io/featherlight/release/featherlight.min.css">
<ul>

</ul>

CSS

li {
  position: relative;
  width: 320px;
  padding: 0;
}
.button {
  border-width: 25px 40px;
  border-color: transparent transparent transparent #f00;
  border-style: solid;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -36px 0 0 -12px;
    border-radius: 8px;
}

JavaScript

var videos = ['VF0h86Jdh-E', 'amfeVeS-iLA'];

var li = '';

for(var i = 0; i < videos.length; i++) {
	li += '<li>' +
  	'<a href="https://www.youtube.com/embed/' + videos[i] + '?autoplay=1" data-featherlight="iframe" data-featherlight-iframe-width="640" data-featherlight-iframe-height="480">' +
  		'<img src="https://i1.ytimg.com/vi/' + videos[i] + '/mqdefault.jpg" />'+
      '<div class="button"></div>' +
  	'</a>'+
  '</li>';
}
$('ul').append(li);
$('a[data-featherlight="iframe"]').featherlight();