Stripo provides two methods for adding video to a template:
- insert the video URL
- embed video
Method 1. Instert video URL
This method works in all email clients on all devices.
To insert the URL:
- create a structure with 1 column
- add the “Video” block
- left click on the container in the template
- insert the link to your video from Youtube or Vimeo
- select the color of the play button: white, red or black
The thumbnail/image of the video preview is automatically inserted, but you can also install it yourself.
Method 2. Embed the video
The embedded video is played directly in an email. Recipients do not have to open another site to view it.
Video playback is not available in all email clients. This type of content is supported only by Apple Mail, Thunderbird and Outlook for MacBook.
The video is embedded via HTML.
To embed this code in the email template, you need to create a structure with one column and add the HTML block to it.
Next, left click on “Insert your HTML in the code editor” in the template to open the code editor. Add the code:
<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>
</video>The code up to the word “fallback” is for recipients whose devices and email clients support video playback. Everything below “fallback” is for recipients who cannot do this. As a result, they will be redirected to Youtube, Vimeo or any other video hosting service.
If you use this code, your users will be able to view your video.
*Setting up the code to be embedded:
- Upload the image you are going to use for the video to any site - it will be used as a preview for users with Apple devices.
MP4 videos generates their own thumbnail image, however, it does not appear on iPhone X and Retina display devices. The play button will appear on it automatically. Paste this link after the "Poster" attribute.
- Convert video to MP4 format using any video hosting service. In the code, replace the link after the "source src" attribute with your URL.
- Convert MP4 video to WebM format and paste the link in the corresponding string of the code. This video will play on those devices that support this format.
- Upload the second image you are going to use for the preview. Add a "play" button image on top of it. In fact, it can be a screenshot of a Youtube video, and it will be displayed in all email clients that do not yet support interactivity.
- Upload the video to Youtube (Vimeo, your site, etc.) and paste the URL in the "href" attribute after the quotation marks instead of the existing link. As soon as the recipient clicks the "play" button, they will be redirected to the corresponding site.