Video: adding video to design and how it works

Using video in marketing channels is a smart way to connect with people. Add video to your Modern Editor email and page designs.

 


Topics covered in this article:

How does embedded video work

Email client support for embedded video

Adding video to your design using Modern Editor

 

 

How does embedded video work

 

Videos can play directly in the email and web pages all thanks mostly to HTML5. HTML5 is a new standard for the internet that allows web developers to easily add neat stuff like audio and video to website and now emails. 

 

Hosting your Video

Your must host your video in a publicly accessible folder. For example, you can host your video on your website or in a hosting service that allows public access to video files outside a media player. This is important to note because services such as Dropbox and Google Drive utilize their own player to avoid hosting video files for HTML (websites or emails). WordFly's media library cannot host video files.

 

Video Versions

It's important to upload the correct video format that is requested in the template video embed tool. Do not add video links to YouTube, Vimeo or other video hosting sites for your mp4 and other video versions.

 

Video format support

BROWSER MP4 OGG/OGV/THEORA WEBM
Android Yes    
Chrome Yes Yes Yes
Firefox   Yes  
Internet Explorer 9* Yes    
iOS Yes    
Opera     Yes
Safari Yes Yes Yes

*Earlier versions of IE do not support embedded video

 

 

 

Email client support for embedded video


We must admit that we are bit a head of the curve on this one. Not every email client will support embedded video. In these cases, the subscriber will see a fall back image and a link directing them to watch the video on your website, Youtube or Vimeo.

 

iPhone's running iOS 10+ do support video in email! However, predecessors iOS 8 and iOS 9 do not support it (the video and the fallback link don't work either - yep, it's a bug!). Apple Mail also supports it.

 

  EMAIL CLIENT SHOWS VIDEO SHOWS IMAGE
  Apple Mail Yes on desktop and iPhone's running iOS 10+. Not on iPhone's running iOS 8+ (see note above)  
  Lotus Notes   Yes
  Outlook (PC)   Yes
  Outlook (Mac) Yes  
  Thunderbird Yes *  
  AOL Mail   Yes
  Gmail   Yes
  Hotmail Yes* Yes**
  Yahoo Mail   Yes
  Android   Yes
  Blackberry   Yes
  iPhone, iPad Yes  

 *requires right-click to play

**Older browsers show the fallback image

 

 

 

Adding video to your design

 

Follow these steps to add a video in your Modern Editor design.

 

1. Open your design in Modern Editor.

2. Drag over a video block to your preview panel (right side).

 

3. Start adding in your video links and fallbacks on the edit content panel (left side).

 

Type in the URL's for the various formats. For more information on which email clients and web browsers support which types of video formats please review the previous sections that covers support. You don't have to create all three versions of your video but you'll get the best support if you do. 

 

Also notice that for those email clients that do not support the video format you're using (or in some cases don't support any video formats such as Outlook) recipients will see the poster/fallback image and clicking will redirect them to YouTube or another site to watch the video.

 

The poster/fallback image is by default the same image and link. You can set separate poster/fallback image and link values. Click on the HTML tab in the lower left corner of the editor. The poster image gets set within the poster attribute on the <video>  tag. The fallback image is set on the <img /> tag located near the end of the video-block markup.

 

 

4. Save your design.

 

 

 

 

 

Have more questions? Submit a request
Powered by Zendesk