backbone: Outlook 2010 newsletter background image won't show up and not clickable

lundi 13 avril 2015

Outlook 2010 newsletter background image won't show up and not clickable

I am trying to display following items in a table for my newsletter...

video thumbnails as background

a play button on top of the thumbnail

the whole cell needs to be clickable. So when I click on the image, the video should play in a new window

After so many trails and errors, found these solutions that took care most of my problems that I was having with Outlook...

A single table cell

https://www.campaignmonitor.com/blog/post/3192/add-a-background-image-to-individual-table-cells/

The newsletter is (kinda) working as planed in Outlook Web App:

Outlook Web App

And Gamil:

Gmail

But is messed up in the most important one...the MSOutlook 2010:

MSOutlook 2010

Here is part of my code:


  $videoURL = $video[$i]['link'][0]['href'];
  $videoThumbnail = $video[$i]['media$group']['media$thumbnail'][4]['url'];
  $videoTitle = $video[$i]['title']['$t'];
  $videoDescription = $video[$i]['media$group']['media$description']['$t'];
  .
  .
  .
  <tr>
    <td background="'.$videoThumbnail.'" valign="top" 
        style="background-size:contain !important; width:225px; height:127px;" >
      <!--[if gte mso 9]>
      <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" 
                stroke="false" style="width:225px; height:127px;">
        <v:fill type="frame" src="'.$videoThumbnail.'" style="background-size: contain;" />
      <![endif]-->
        <div>
        <!--[if mso]>
          <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" 
                      xmlns:w="urn:schemas-microsoft-com:office:word" 
                      href="'.$videoURL.'" 
                      style="height:127px; v-text-anchor:middle; width:225px;">
            <w:anchorlock/>
            <center>
        <![endif]-->
              <a target="_blank" href="'.$videoURL.'"
                  style="width:100%; height:100%; text-decoration: none;">
                <!--[if gte vml 1]> 
                <v:image style="width: 225px; height: 127px; position: absolute; border:0; " src="play.png" />
                <![endif]-->
                <img alt="'.$videoTitle.'" height="127" width="225" src="play.png" />
              </a>
          <!--[if mso]>
            </center>
          </v:roundrect>
        <![endif]-->
        </div>
      <!--[if gte mso 9]>
      </v:rect>
      <![endif]-->
    </td>
    <td style="padding: 0px; margin: 0; border: 0; vertical-align:top;">
      <p style="color: rgb(137, 137, 137); 
                line-height: 1.2em; 
                width: 335px; 
                float: left; 
                font-family: TimesNewRoman,Times,Baskerville,Georgia,serif; 
                font-weight: normal; 
                font-size: 18px; 
                margin: -2px 0px 0px 15px;">
        '.$videoDescription.'
      </p>
    </td>
  </tr>
  .
  .
  .