Logo

Le superblog de l'email marketing Le blog emailing de référence par Sarbacane: retrouvez toute l'info de l'email marketing sur emailing.biz
clear image

L'astuce du jour

de Email Devil

Vous avez du mal à atteindre vos objectifs marketing ?

Je vous recommande Sarbacane, la meilleure application française pour créer et automatiser vos campagnes Email & SMS marketing.

Le plus : Les experts de Sarbacane suivent vos projets et vous aident à optimiser vos performances.

Email Devil
Par
Ne vous fiez pas à son nom diabolique, ce super-héros connait un tas de super-tutos pour combattre les mauvaises habitudes.
le 21 mai 2014 | 2 commentaires

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

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

Vous souhaitez faire des essais ? Utilisez cette version en ligne intégrant le code indiqué.

EmailVideo

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

Tags:

réponses to “Mettre une vidéo en arrière-plan de son email”

  1. Merci pour le code et les infos, mais il manque l’usage des supports mobiles (tablettes et smartphone), où la vidéo est bien mieux toléré que sur les lecteurs d’ordinateur.

    B Florence

    • Bonjour Bruno,

      la méthode présentée dans cet article fonctionne sur l’Apple Mail depuis un Mac, la vidéo commence automatiquement à l’ouverture de l’email.
      Sur les supports mobiles, la vidéo ne s’affiche pas directement, il faut cliquer sur le symbole « play » pour lire la vidéo.

      Il existe une autre méthode pour intégrer une vidéo dans un email, voici l’article qui la présente : http://www.emailing.biz/techniques/integrer-video-newsletter/
      Avec ce code, la vidéo est intégrée dans l’email mais il faut aussi cliquer sur le bouton « play » pour la lire.

      Bonne journée !

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont marqués *


*