JSFiddle - React, Tailwind, and code Playground

HTML

<div class="video" data-id="RPufqeaCAmw">
  <img alt src="http://www.dailymobile.net/wp-content/uploads/wallpapers/landscape-wallpapers-320x240/nokia-e63-wallpapers-320x240-landscape-05.jpg">
</div>

<div class="video" data-id="YzqHu6NaQkw">
  <img alt src="http://m.androidwallpapercentral.com/downloads/ANdroidWallpaperShed.jpg">
</div>

SCSS

.video {
  background: #333;
  display: inline-block;
  cursor: pointer;
  margin: 0.5em;
  position: relative;
  vertical-align: top;
  &::after {
    border: 30px solid transparent;
    border-left-color: #EEE;
    border-left-width: 50px;
    border-right: none;
    bottom: 0;
    content: '';
    height: 0;
    left: 0;
    margin: auto;
    opacity: 0.75;
    position: absolute;
    transition: all 0.3s;
    right: 0;
    top: 0;
    width: 0;
  }
  &:hover::after {
    border-width: 35px;
    border-left-width: 58px;
    opacity: 0.9;
  }
  iframe {
    border: none;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
  }
}

JavaScript

window.addEventListener('DOMContentLoaded', function() {
	'use strict';
  
  function play() {
  	var id = this.dataset.id;
    if(id) {
    	var embed = document.createElement('iframe');
      embed.allowFullscreen = true;
      embed.name = 'video-' + Math.random();
      embed.src = 'https://www.youtube.com/embed/' + id + '?autoplay=1';
      this.appendChild(embed);
      this.classList.add('video--play');
      this.removeEventListener('click', play);
    }
  }
  
  var i, videos = document.querySelectorAll('.video');
  
  for(i = 0; i < videos.length; i++) {
  	videos[i].addEventListener('click', play);
  }
});