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

video arriere plan emailing

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

Video

Image

Image

Couleur

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

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 ».