Email Development April 19, 2016 • Kyle Lapaglia

How to Embed Videos that Are Playable in Yahoo! Mail

This article will show you how you can embed videos that are playable inside Yahoo! Mail by taking advantage of certain Yahoo! Mail markup that loads the Yahoo! Mail video player. Right now, it looks like the videos are limited to YouTube, Vimeo and a handful of other providers. If you have a lot of Yahoo! Mail subscribers, this simple technique might pay off for you as long as you host your videos at the above mentioned services. Yahoo! Mail recently updated their Rich Link Previews to support videos from YouTube, Vimeo and other providers (hat tip to Rémi Parmentier). In essence when a user pastes a YouTube link, Yahoo! Mail creates a card that displays a thumbnail and summary of the video. When sent to another Yahoo! Mail inbox, the card would actually allow the recipient to play the video inside the email itself. How to Embed Videos that Are Playable in Yahoo! Mail

Leveraging Rich Link Previews to Embed Videos

From analyzing the code generated by Yahoo! Mail, I was able to figure out that a div with these attributes will cause Yahoo! Mail to display a play button within the div.

<div class="yahoo-link-enhancr-card " data-url="https://www.youtube.com/watch?v=S_1XgniPIB8" data-type="yenhancr" data-category="video" data-embed-url="https://www.youtube.com/embed/S_1XgniPIB8?feature=oembed&autoplay=1&showinfo=0&modestbranding=1&enablejsapi=1" style="width:400px;" >
CONTENT
</div>

That means that you don't need to generate all the verbose code in the card to get Yahoo! Mail to play videos, you just need wrap an image with a div containing the markup above. It looks like the primary trigger is the "yahoo-link-enhancr-card" class. The code then looks for the data-url as well as data-embed-url attributes in order to load the video. With these attributes, Yahoo! Mail will display a functional play button over the div. Surprisingly, I was able to omit both data-type and data-category and the video would still play. I'm not sure what data-url does, but data-embed-url is essentially the URL of the embeddable YouTube player that is displayed in an iframe when you click on the play button. How to Embed Videos that Are Playable in Yahoo! Mail

Basic Example

Say we want to embed this YouTube video in an email. basic example

1. Begin with placeholder image and link

Although there are several techniques to make video playable in email, due to the lack of support for video in most email clients and the complexity, most people just put an image with a "play" button and link the image to a landing page with the video. So we'll start with just a placeholder image and link as a fallback that takes the user to a landing page when clicked.

<a href="https://www.youtube.com/watch?v=Wji-BZ0oCwg">
  <img src="https://freshinbox.com/images/ext/rogueone-600-playbtn.jpg" width=600 style="width:600px;display:block" border=0>
</a>

1. Begin with placeholder image and link

2. Add code that triggers the Yahoo! Mail video player

To make Yahoo! Mail display the play button, we first need to obtain the URL of the embeddable YouTube player. Youtube's video player URL is formatted as follows:

https://www.youtube.com/embed/YOUTUBE_VIDEO_ID?feature=oembed&
autoplay=1&showinfo=0&modestbranding=1&enablejsapi=1

You can obtain the YOUTUBE_VIDEO_ID from the URL of the video: https://www.youtube.com/watch?v=YOUTUBE_VIDEO_ID and in this case it is: Wji-BZ0oCwg So, adding the Yahoo! Mail video code you get:

<div class="yahoo-link-enhancr-card"  data-url="https://www.youtube.com/watch?v=Wji-BZ0oCwg" data-type="yenhancr" data-category="video" data-embed-url="https://www.youtube.com/embed/Wji-BZ0oCwg?feature=oembed&autoplay=1&showinfo=0&modestbranding=1&enablejsapi=1" style="width:600px;">
<a href="http://www.starwars.com">
  <img src="https://freshinbox.com/images/ext/rogueone-600-playbtn.jpg" width=600 style="width:600px;display:block" border=0>
</a>
</div>

With the above code, users on Yahoo! Mail will be able to play the video in the email, recipients viewing the email in other clients would click off into the landing page that hosts the video.

Vimeo Player URL

If you would like to embed a video from Vimeo, the Vimeo player URL format looks like this:

https://player.vimeo.com/video/VIMEO_VIDEO_ID?autoplay=1&badge=0&byline=0&title=0&portrait=0

More Advanced Example

The basic example had two drawbacks. First, the play button is displayed 60 pixels from the top of the image. Depending on the height of your image, this may not be vertically centered. Second, if you already have a play button on your image, the overlay of Yahoo! Mail's play button on top of the existing play button may make the image look a bit strange - it would be nice to display an alternative image instead.

1. Vertically centering the play button

The play button is displayed within a generated div. Since this would be the only div within our video container we can set a class "video-container" to the container and target the button with the following style.

<style>
.video-container div {
  margin-top:XXXpx;
}
</style>

The button is about 60px high and it is already absolutely positioned 60px from the top. So to properly center the button in our image, we use the following calculation: margin-top = (height_of_image/2) - (height_of_button/2) - 60 So for an image that is 340px high: margin-top = (340/2) - (60/2) - (60) = 80px

2. Displaying an alternate video placeholder in Yahoo! Mail

This is completely optional but it would be nice to have an image that actually tells the user that they can play the video in the image itself. 2. Displaying an alternate video placeholder in Yahoo! Mail

The way you do this is to set the container to the height of one image and set overflow to hidden. Stack the images on top of each other, with the alternate image (made for Yahoo! Mail) on top and the linked static fallback image on the bottom. Finally, hide the video container from all clients except Yahoo! Mail. In Yahoo! Mail, the alternate image will obscure the original image by pushing it out of the container. We selectively hide the container by using an obscure quirk of Yahoo! Mail that strips "display:none!important" when applied as an inline style. Therefore only Yahoo! Mail will display the video container. The final code is below, or you can check it out on Codepen.

<!DOCTYPE html>
<html>
<head>
  <style type="text/css">
    .video-container div {
      margin-top:80px;
    }
  </style>
</head>
<body>
  <center>
    <table width="640">
      <tr>
        <td>
          <table width="100%">
            <tr>
              <td bgcolor="#000000" style="background-color:#000000;color:#eeeeee" colspan="2">
                <center>
                  <br/>
                    <span style="font-size:28px;font-weight:bold;font-family:Arial;">Featured Movie Trailer</span>
                    <div style="width:600px;height:340px;max-height:340px;overflow:hidden;">
                      <!-- Yahoo! Mail strips display none in all browsers but not IE which works in our favor as YMail's Video Player is broken on IE -->
                      <div class="yahoo-link-enhancr-card video-container"  data-url="https://www.youtube.com/watch?v=Wji-BZ0oCwg" data-type="yenhancr" data-category="video" data-embed-url="https://www.youtube.com/embed/Wji-BZ0oCwg?feature=oembed&autoplay=1&showinfo=0&modestbranding=1&enablejsapi=1" style="display:none!important;mso-hide:all">
                        <a href="http://www.starwars.com/video/rogue-one-a-star-wars-story-official-teaser-trailer" class="alt-video" >
                          <img class="video-img" src="https://freshinbox.com/images/ext/rogueone-600-yahoo.jpg" width="600" style="width:600px;display:block" border="0">
                        </a>
                      </div>
                      <a href="http://www.starwars.com/video/rogue-one-a-star-wars-story-official-teaser-trailer">
                        <img class="video-img" src="https://freshinbox.com/images/ext/rogueone-600-playbtn.jpg" width="600" style="width:600px;display:block" border="0">
                      </a>
                    </div>
                </center>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </center>
</body>
</html>

Yahoo! Mail's Video Player broken in Internet Explorer

Apparently Yahoo! Mail's video player is broken in IE 10 and 11 as of the writing of this article. However, it appears that Yahoo! Mail doesn't strip "display:none !important;" in Internet Explorer (yeah odd, right?)—that means our fallback placeholder will appear in Internet Explorer and recipients don't encounter the broken video player. Nice coincidence.