Follow

Marketing - Embed HTML5 Video Into Lasso Email Template

Marketing - Embed HTML5 Video Into Lasso Email Template

In this article:

About Embedding Video Into Email

If you want to include a video as part of an email template you are creating in Lasso, please be aware that not all email clients support embedding video directly into email. For this reason, Lasso recommends linking an image to your video instead. Alternatively, consider integrating a video email application such as BombBomb to embed your video. However, BombBomb will still experience the same email client limitations.

Email Client Support Provided for Embedded Video

The following table shows the support that is provided by the various email clients for embedded video.

emailclientsupport.jpg

Insert HTML and CSS Code Into Lasso Email Template

To embed video into your Lasso email template, you will need to add specific HTML and CSS code to your existing template, and customize the code with your video details.

1 - Insert the following CSS code somewhere within the <style> tags of your template. This code does not need to be changed.

.video-wrapper {display:none;}

@media (-webkit-min-device-pixel-ratio: 0) and (min-device-width:1024px)

{

.video-wrapper { display:block!important; }

.video-fallback { display:none!important; }

}

@supports (-webkit-overflow-scrolling:touch) and (color:#ffffffff) {

div[class^=video-wrapper] { display:block!important; }

div[class^=video-fallback] { display:none!important; }

}

#MessageViewBody .video-wrapper { display:block!important; }

#MessageViewBody .video-fallback { display:none!important; }

2 - Insert the following HTML in the body of your email, where you want your video to appear. You will need to customize this code as in section Customize HTML Code

<!-- video section -->

<div align="center" class="video-wrapper" style="display:none;">

<video width="500" height="auto" controls="controls" poster="http://app.lassocrm.com/FileWarehouse/Users/User_25264/Images/video_screen_without_play.jpg" src="https://www.lassocrm.com/wp-content/uploads/2020/04/ECI_Lasso_CRM.mp4" >

<!-- fallback 1 -->

<a href="https://www.lassocrm.com/wp-content/uploads/2020/04/ECI_Lasso_CRM.mp4" ><img height="auto"

src="http://app.lassocrm.com/FileWarehouse/Users/User_25264/Images/video_screen_with_play.jpg" width="500" /></a>

</video>

</div>

<!-- fallback section -->

<div class="video-fallback">

<a href="https://www.lassocrm.com/wp-content/uploads/2020/04/ECI_Lasso_CRM.mp4" ><img height="auto"

src="http://app.lassocrm.com/FileWarehouse/Users/User_25264/Images/video_screen_with_play.jpg" width="500" /></a>

</div>

Customize HTML Code

You will need to customize the code provided in the section Insert HTML and CSS Code Into Lasso Email Template to ensure your video will display correctly in email clients that support embedded email as well as email clients that use a fallback. (Please refer to Email Client Support Provided for Embedded Video.)

1 - Under <!-- video section -->, in the line poster=http://app.lassocrm.com/FileWarehouse/Users/User_25264/Images/video_screen_without_play.jpg, replace the URL with an image that best represents your video.

For example, Lasso uses this image.

exampleimage.jpg

2 - Under <!-- video section -->, in the line src=https://www.lassocrm.com/wp-ontent/uploads/2020/04/ECI_Lasso_CRM.mp4, replace the URL with the link where your video is hosted.

Note: This cannot be a YouTube or Vimeo embed link. The video must be hosted on a server such as your company website.

3 - Under <!-- fallback 1 -->, in the line <a href="https://www.lassocrm.com/wp-content/uploads/2020/04/ECI_Lasso_CRM.mp4" >, replace the URL with the link where your video is hosted (same link as in Step 2 above).

4 - Under <!-- fallback 1 -->, in the line src=http://app.lassocrm.com/FileWarehouse/Users/User_25264/Images/video_screen_with_play.jp, replace the URL with the image containing play button placed over it. This will act as a fallback image and the play button will ensure your readers know to click on it to view the video in a browser window.

For example, Lasso uses this image.

exampleimage2.jpg

5 - Under <!-- fallback section -->, in the line <a href="https://www.lassocrm.com/wp-content/uploads/2020/04/ECI_Lasso_CRM.mp4" >, replace the URL with the link where your video is hosted (same link as in Step 2 above).

6 - Under <!-- fallback section -->, in the line src=http://app.lassocrm.com/FileWarehouse/Users/User_25264/Images/video_screen_with_play.jpg, replace the URL with the image containing play button placed over it. This will act as a fallback image and the play button will ensure your readers know to click on it to view the video in a browser window.

Test Template

Use Lasso’s test email function to test your email template on multiple email clients. Click on the video image to ensure it plays, and/or links to the correct URL.

Full Code for Embedding HTML5 Video In Email Template

If you would like to try sample code before creating your own template, use the following code and paste into the source code section of a new email template:

<!doctype html>

<html>

<head>

<title></title>

<style type="text/css">

 .video-wrapper {display:none;}

 @media (-webkit-min-device-pixel-ratio: 0) and (min-device-width:1024px)

 {

  .video-wrapper { display:block!important; }

  .video-fallback { display:none!important; }

 }

 @supports (-webkit-overflow-scrolling:touch) and (color:#ffffffff) {

  div[class^=video-wrapper] { display:block!important; }

  div[class^=video-fallback] { display:none!important; }

  }

  #MessageViewBody .video-wrapper { display:block!important; }

  #MessageViewBody .video-fallback { display:none!important; }

</style>

</head>

<body>

<!-- video section -->

<div align="center" class="video-wrapper" style="display:none;">

<video width="500" height="auto" controls="controls" poster="http://app.lassocrm.com/FileWarehouse/Users/User_25264/Images/video_screen_without_play.jpg" src="https://www.lassocrm.com/wp-content/uploads/2020/04/ECI_Lasso_CRM.mp4" >

<!-- fallback 1 -->

<a href="https://www.lassocrm.com/wp-content/uploads/2020/04/ECI_Lasso_CRM.mp4" ><img height="auto"

src="http://app.lassocrm.com/FileWarehouse/Users/User_25264/Images/video_screen_with_play.jpg" width="500" /></a>

</video>

</div>

<!-- fallback section -->

<div class="video-fallback">

<a href="https://www.lassocrm.com/wp-content/uploads/2020/04/ECI_Lasso_CRM.mp4" ><img height="auto"

src="http://app.lassocrm.com/FileWarehouse/Users/User_25264/Images/video_screen_with_play.jpg" width="500" /></a>

</div>

</body>

</html>