Quickly embed YouTube videos directly in your email client.

Here’s how:

Basic Usage

{[ emailyoutube id:'HEKYCBEpTlU' title:'Winsome Documentary' ]}

This will put the video with the id provide onto your email in a responsive container. The id can be found in the address of the YouTube video. There are also a couple of options for you to add:

• id (required) – The YouTube id of the video.
• thumbnail_url (required) – A URL for the default image.
  
• title – The title of the video, provides hover text (Watch {{title}}).

Setup

To use the YouTube email embed in your templates, copy the CSS below into the <style> tag for every template you want to use the embed.

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

Credits

The underlying embed methodology was developed by Stig Morten Myre at Campaign Monitor.

The Code

Parameters

id
thumbnail_url
title

Shortcode Markup

{% assign parts = id | Split:'/' %}
{% assign id = parts | Last %}
{% assign parts = id | Split:'=' %}
{% assign id = parts | Last | Trim %}

{%- assign thumbnail_url = thumbnail_url | Trim -%}
{% if thumbnail_url == '' %}
{% capture thumbnail_url %}https://img.youtube.com/vi/{{ id }}/maxresdefault.jpg{% endcapture %}
{% endif %}

{% if id != '' %}

  
    <!--[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={{ id }}" title="Watch {{ title }}" 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="{{ thumbnail_url }}" role="presentation" style="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="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>
        </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://www.youtube.com/watch?v={{ id }}" style="width:600px;height:337px;">
          <v:rect fill="t" stroked="f" style="position:absolute;width:600;height:337;"><v:fill src="{{ thumbnail_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]-->
{% endif %}