<!--[if (mso)|(IE)]><table width="600" align="center" cellpadding="0" cellspacing="0" role="presentation"><tr><td><![endif]-->
    <div class="youtube-video" style="Margin: 20px auto; max-width: 600px; min-width: 320px;">
      <!--[if !vml]-->
      <a href="https://www.youtube.com/watch?v=HEKYCBEpTlU" title="Watch " class="video-preview" style="background-color: #5b5f66; background-image: radial-gradient(circle at center, #5b5f66, #1d1f21); display: block; text-decoration: none;">
        <table cellpadding="0" cellspacing="0" border="0" width="100%" background="https://img.youtube.com/vi/HEKYCBEpTlU/maxresdefault.jpg" role="presentation" style="background-size: cover; min-height: 180px; min-width: 320px;">
          <tbody><tr style="transition: all .5s cubic-bezier(0.075, 0.82, 0.165, 1);">
            <td width="25%">
              <img src="https://placehold.it/150x337.gif?text=+" alt="" width="100%" border="0" style="height: auto; opacity: 0; visibility: hidden;">
            </td>
            <td width="50%" align="center" valign="middle" style="vertical-align:middle!important;">
              <div class="play-button" style="background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.1)); border: 4px solid white; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,0.3), inset 0 1px 2px rgba(0,0,0,0.3); height: 34px; margin: 0 auto; padding: 18px 16px 18px 24px; transition: transform .5s cubic-bezier(0.075, 0.82, 0.165, 1); width: 30px;">
                <div style="border-color: transparent transparent transparent white; border-style: solid; border-width: 17px 0 17px 30px; display: block; font-size: 0; height: 0; Margin: 0 auto; width: 0;">&nbsp;</div>
              </div>
            </td>
            <td width="25%">
              &nbsp;
            </td>
          </tr>
        </tbody></table>

      </a>
      <!--[endif]-->
      <!--[if vml]>
        <v:group xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" coordsize="600,337" coordorigin="0,0" href="https://vimeo.com/HEKYCBEpTlU" style="width:600px;height:337px;">
          <v:rect fill="t" stroked="f" style="position:absolute;width:600;height:337;"><v:fill src="https://img.youtube.com/vi/HEKYCBEpTlU/maxresdefault.jpg" type="frame"/></v:rect>
          <v:oval fill="t" strokecolor="white" strokeweight="4px" style="position:absolute;left:261;top:129;width:78;height:78"><v:fill color="black" opacity="30%" /></v:oval>
          <v:shape coordsize="24,32" path="m,l,32,24,16,xe" fillcolor="white" stroked="f" style="position:absolute;left:289;top:151;width:30;height:34;" />
        </v:group>
      <![endif]-->
    </div>
    <!--[if (mso)|(IE)]></td></tr></table><![endif]-->



        
        

    </div>
.video-preview:hover .play-button {
  transform: scale(1.1);
}
.video-preview:hover tr {
  background-color: rgba(255, 255, 255, .2);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.