If you would like to add a video to your email to make it more interactive, the best way to do it is to use the "Video" tool in the Stripo editor.
The "Video" block allows you to create a beautiful thumbnail image for your video, which contains a link to the video itself and the video's title.
How to create a thumbnail with a link to a video?
In order to create a thumbnail image for your video, simply add the block "Video" to an email. On the right panel, paste the link to your video in the field "Link to Video":
It is important to notice that the video block supports only YouTube and Vimeo videos.
Done. Our editor will now generate a thumbnail image, add the link to the video, as well as the "Play button" and the video’s title:
The panel Video block allows you to customize the thumbnail’s appearance: you can add your own thumbnail image, change the Play button, change the title, etc.
How to embed a video player right into an email?
Most email clients don't support playing a video directly in an email.
However, there are a few email clients that let users enjoy watching videos in emails if we add an HTML5 player: so far, it’s Outlook 2011 and 2013 for Mac OS, and AppleMail on MacBook, iPhone 7, 8 and X.
In order to embed the HTML5 player, your video clip must be uploaded to your own server in the formats MP4 and WEBM.
Then, add our ready-to-use video player’s code to an email. It consists of two parts:
1) The first part is meant for those email clients where the video player is supported; it contains links to a video file in the format of mp4 or webm;
2) The second part contains a link to the same video, but it is hosted on websites such as Youtube or Vimeo. If an email client does not support the embedded player, a user will be redirected to a video hosting site and watch the video there.
Here is the code of our player. Copy this code:
<video class="adapt-img" controls="controls" poster="https://jenbfo.stripocdn.email/content/guids/videoImgGuid/images/image16586923322854343.png" width="100%" height="313"> <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> <source src="http://www.w3schools.com/html/mov_bbb.webm" type="video/webm">
<!-- fallback -->
<a href="https://www.youtube.com/watch?v=ryqOEPk51Lg/" class="esd-frame-element esd-hover-element esdev-disable-select"> <img class="adapt-img" src="https://jenbfo.stripocdn.email/content/guids/videoImgGuid/images/image16586923322854343.png" alt="" width="100%" height="313"></a></video>
In the Stripo editor, add an HTML block and replace the code of this block with our player’s code, as shown below:
Now you need to insert your own links into this code. Let us find out what the links are responsible for:
The first link is a thumbnail image. Certainly, some devices can generate a thumbnail image using an MP4 video, but this image will not render on iPhone X and devices with Retina displays. Paste this link after the "Poster" attribute;
The next two links are links to our video files in the formats .MP4 and .WebM. Links to Youtube or Vimeo won’t work here. Replace the links that go after the "source src" attribute with your own links;
The other two links that go after the word fallback are links to a Youtube video and to its preview image. This is our fallback for those email clients that don’t support embedded videos. Upload your video to Youtube or Vimeo and upload the second image used as a thumbnail. Replace the links that go after the "href" and “src” attributes with yours.
Done. Now some of your clients will be able to watch a video directly in the email, while other clients will be redirected to the fallback video page.
Thank you for taking your time to read our articles. We hope you will find this information helpful.
If you have any additional questions, please email us at email@example.com.
We would be glad to talk with you.