The power of video marketing is undeniable. With video content, telling stories is more quickly than static images. And also, you are able to communicate with your subscribers within seconds what takes paragraphs to tell in writing.
Real videos may not be supported in your customers, but it doesn’t mean you can’t add video-like interactions to your newsletter designs. The faux video is the solution.
The faux video makes your readers feel like they are playing your video in their inbox.
Why faux video?
Putting the video in newsletter design is a popular topic, but it doesn’t work except Apple Mail and İOS Mail. With a faux video technique, you are able to imitate real videos in your newsletter design with support across of email clients.
The technique is supported by:
• Samsung Mail
• Gmail
• Gmail App
• Outlook for Mac
• Apple Mail
• IOS Mails for iPhone and iPad
Do you want to add video-like movements into your newsletter designs? Use the faux video technique. With using the faux video technique, your video contents are seen by more subscribers than utilizing HTML5 video.
How to create a faux video
When you want to use faux video technique in your next newsletter design, you need two images which are the same size. One of them is a static cover and the other one is an animated GIF, you should layer them on top of each other.
1. The static cover
We named the static cover image as cover-play.jpg, in this example. The static cover image is the image which will display by default, but it will disappear and expose the background GIF if your reader interacts with your newsletter design.
2. Animated GIF
After, you need an animated GIF background image. In this example, our animated GIF background image is named fauxvideo.gif. Animated GIF background image is the image which is released when your reader hovers on your static cover image. This is placed in your code as a normal background image.
The CSS/HTML Part
It is explained below how to use HTML and CSS to put the faux video in your newsletter design:
- CSS
This code should be in between the <head> and </head> tags at the top of your newsletter design..showvideo:hover{ opacity: 0 !important; transition: 0.3s !important;}.showvideo { transition: 0.3s !important; }
- HTML
You need to add two sections of code in your HTML, a <td> cell and an <img> cell.This is the code for <td> cell that will load the animated GIF as a background image.
<td class=”w100p” background=”http://fauxvideo.gif” //location of your gifbgcolor=”#43a1e2″ style=”width: 600px; max-width: 600px; background-size: cover; background-position:center !important; border-radius: 10px; box-shadow: 0 15px 35px rgba(50,50,93,.1), 0 5px 15px rgba(0,0,0,.07);” valign=”top”>
This is the code which is for the cover-play.jpg image which is hidden on :hover.
<img class=”showvideo” src=”http://cover-play.jpg” style=”display:block; color: #ffffff; font-family:’proxima_nova’, Helvetica, Arial, sans-serif; font-weight:bold; font-size:36px; line-height:40px; max-width: 100%; border-radius: 10px;” width=”600″ border=”0″ alt=”Play” />
