video-email-embed

<!--[if (mso)|(IE)]><table width="600" align="center" cellpadding="0" cellspacing="0" role="presentation"><tr><td><![endif]-->
                <div style="display:block; margin: 20px 0; max-width: 600px; min-width: 320px;">
                  <!--[if !vml]-->
                  <a href="{{ image.url }}" 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="{{ image.medium_url }}" role="presentation" style="animation: video-frames 15s ease infinite; -webkit-animation: video-frames 15s ease infinite; background-size: cover; min-height: 180px; min-width: 320px;">
                      <tr style="transition: all .5s cubic-bezier(0.075, 0.82, 0.165, 1);">
                        <td width="25%">
                          <img src="http://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">
                          <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>
                    </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="{{ image.url }}" style="width:600px;height:337px;">
                      <v:rect fill="t" stroked="f" style="position:absolute;width:600;height:337;"><v:fill src="{{ image.medium_url }}" 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]-->