Mettre une vidéo en arrière-plan de son email

Vous souhaitez intégrer une couleur, une image d’arrière-plan ou encore une vidéo en fond de votre email ? Oui, une vidéo c’est possible sur Apple Mail via Mac !
Quelle messagerie supporte quel format ? Nous vous éclairons sur l’arrière-plan de votre campagne emailing !

Comme indiqué ci-dessus, l’arrière-plan de votre email peut afficher 3 formats. Toutes les messageries ne supportent pas la vidéo ni l’image. Vous êtes donc dans l’obligation de renseigner au moins la couleur d’arrière-plan de votre campagne, même si c’est blanc.

Les 3 formats peuvent être intégrés dans le code de votre campagne :
– La vidéo pour Apple Mail sur Mac
– L’image d’arrière-plan pour les messageries ne supportant pas le format vidéo
– La couleur de fond pour les messageries qui n’affichent pas l’image

Pour cela, il faut intégrer dans la balise <HEAD> :

<STYLE>
@media screen and (-webkit-min-device-pixel-ratio: 0) {
        div[class="line1"]{display: block;border-top: 1px solid #d3d3d3;width: 25%;float: left;margin-top: 15px;}
        div[class="format"]{width: 50%; display: block; float: left;}
        div[class="line2"]{display: block;border-top: 1px solid #d3d3d3;width: 17%;float: left;margin-top: 15px;}
        div[class="last-year"]{display: block; width: 66%; float: left;}
        div[class="video-wrap"]{height: 100%;height: 750px;position: relative;overflow: hidden;padding:0;margin:0;}
        video[class="video"]{min-height: 100%; min-width: 100%;position: absolute;top: 0p;left: 0;z-index: 2;display:inline-block !important;}
        div[class="overlay"]{height: 100%;position: relative;min-height: 100%;margin: 0 auto;padding: 0 20px;z-index:3;}
        td[class="no-padding"]{padding: 0 !important;}
        td[class="title"]{display: block !important; padding-top: 35px;}
        td[class="webkit-hide"]{display: none !important;}
    }
</STYLE>

Et dans la balise <TR> du tableau :

<TD class=no-padding width="100%" align=center>
<DIV class=video-wrap style="BACKGROUND: url(http://VOTREIMAGE.jpg) no-repeat center top; PADDING-BOTTOM: 50px; PADDING-TOP: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; background-size: cover" bgColor=#VOTRECOULEUR>
<VIDEO class=video style="DISPLAY: none" autoplay="autoplay" loop="loop"><SOURCE src="https://VOTREVIDEO.mp4" type="video/mp4"></SOURCE>
</VIDEO></DIV>
</TD>

Attention à bien remplacer les indications :
– « votreimage.jpg » et « votrevideo.mp4 » par l’image d’arrière plan et le vidéo que vous souhaitez afficher, les deux fichiers doivent être hébergés
– « votrecouleur » par la couleur définie en valeur hexadécimale, exemple : #f3a956

Créer une image d’arrière-plan est indispensable pour 2 raisons :
– la majorité des messageries n’affichent pas la vidéo
– certains lecteurs peuvent avoir des difficultés à télécharger la vidéo de fond à cause de la taille du fichier
Il est indispensable de définir une couleur de fond pour les messageries qui n’affichent pas l’image d’arrière-plan.

Le format affiché selon la messagerie utilisée :

	Vidéo	Image	Couleur
Apple Mail sur Mac
Apple Mail sur iPad & iPhone
Outlook 2003
Outlook 2007, 2010 et 2013
Thunderbird
Outlook.com
Gmail
Yahoo
Zimbra
SFR
LaPoste
Numericable
Windows Live Mail
Windows Mail
Bouygues Telecom

Pour les messageries qui n’affichent pas la vidéo, vous pouvez intégrer une animation .gif simulant une vidéo. Nous vous invitons à lire l’article sur la tendance « GIF ».