Please watch our "How to Embed Video into Your Email with Stripo" video.
Our editor provides two ways of adding videos in an email/template:
- Inserting URL link to your video.
- Embedding video.
Way 1. Inserting URL link to your video
This is a totally safe way of delivering videos, because it works perfectly well in all email clients and on all devices.
How to insert URL link to your video:
- pull a 1-column structure in your HTML email template;
- pull in a "Video" basic block;
- left-click the container in the email;
- in the settings panel, you will only need to insert the link to your video on Youtube or Vimeo;
- our system will automatically fill out the “Alternate text” field;
- select the color of the “play button” — it can be white, traditional red, and black.
Our system automatically generates the thumbnail/preview image for your videos. But you may also set a custom one if you want.
How to set a custom thumbnail to video in emails:
- toggle the “custom thumbnail” button in the settings panel;
- upload your image;
- edit it if necessary.
You may even insert an animated GIF as the thumbnail image if you like. It will certainly draw even more attention to the video.
Important to note:
The play button will be displayed over the custom image, as well.
So, you can pick the "none" button if your GIF contains an image of the button.
Way 2. Embedding video
Embedded video is the kind of videos that are played right in emails. Recipients are not required to go to another website to watch it.
Yes, it cannot be played in all email clients. In fact, only the following email clients support HTML5: Outlook 2011 and 2013 for Mac OS, and Apple Mail (viewed on MacBook and iPhone 7, 8, X. Previous versions do not support HTML5).
Stripo gives its users a universal code — by using which you provide your users with the video you want to share. (Please find it below)
We recommend sticking to the following order:
- Embed this code in your email template.
- Customize the given code by inserting your URL links.
How to embed this code in emails with Stripo:
- pull the 1-column structure in your HTML email template;
- drop an HTML basic block;
- in the email template, left-click the “Insert your HTML in the code editor” text to open the Code editor;
- in this editor, instead of “Insert your HTML code editor" paste the embed code;
РУСЛАН, можешь заменить гифку пожалуйста)
Customize the embed code.
The very code to embed:
<video class="adapt-img" controls="controls" poster="https://tlr.stripocdn.email/content/guids/CABINET_0bd21bea47f1cfb916fb84d59a107495/images/92621531318217276.jpg" 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://tlr.stripocdn.email/content/guids/CABINET_0bd21bea47f1cfb916fb84d59a107495/images/48461531318273724.jpg" alt="" width="100%" height="313"></a>
The part of the code that goes above the “fallback” is for those recipients whose devices and email clients support this kind of interactivity. While the part below is for those whose email clients do not support interactivity — they are redirected to Youtube, Vimeo or any other video hosting site.
By using this code, you make sure that your users will see the video you want to share.
Customize the embed code:
- upload the image that you are going to use as the thumbnail one, to any site (I use Pinterest for these purposes) — it will serve as the preview image for those clients who use Apple devices. Certainly, the MP4 video will generate its own thumbnail image, but this image will not render on iPhone X and devices with Retina displays. The play button will automatically appear on it. Paste this link after the "Poster" attribute;
- convert your video to MP4 format by using any video hosting site. In the code, replace the link that goes after the "source src" attribute with your URL;
- convert your MP4 video to the WebM format — and insert the link in the respective line in the code. This video will be played on those devices that support this format;
- and upload the second image you are going to use as the thumbnail one. Draw the “play” button over it. It can be actually a screenshot of your video on Youtube — will be displayed in all email clients that do not support interactivity in emails yet;
- then upload your video to Youtube (Vimeo, your website, etc.) — paste this URL in the "href" attribute after the quotation marks instead of the existing link. Once the recipient hits the “play” button, he or she will be directed to the respective website.
Please note: As some email clients or browsers do not support video playback in email, you can be redirected to the video hosting page.
For more information on how to work with videos, please refer to our "How to Add Video in Email with Stripo" blog post.