Email 2.0: mktoVideo element generating non responsive code?

[Grégoire_Miche2]

Dear all,

Trying to use the mktoVideo element, we discovered that the generated code is hard to make responsive:

Here is the element in the template:

<div class="mktoVideo" id="video-1" mktoName="Video block-recommended width: 550px" style="padding 10px 25px; border:none; display:block; outline:none; text-decoration:none; width:100%; max-width:550px; height:auto;">

</div>   

I have inserted a video and set the width/height to 550/416 px. Here is the code generated by the editor:

<div class="mktoVideo" id="video-1" mktoname="Video block-recommended width: 550px" style="padding 10px 25px; border:none; display:block; outline:none; text-decoration:none; width:100%; max-width:550px; height:auto;">

     <a href="https://www.youtube.com/watch?v=2Lm4XMcauDE" target="_blank">

          <table style="mso-hide:all;">

               <tbody>

                    <tr>

                         <td></td>

                         <td rowspan="2"><img class="mktoVideoThumbnail" alt="" src="https://img.youtube.com/vi/2Lm4XMcauDE/0.jpg" width="550" height="416" style="width: 550px; height: 416px; min-height: 550px; max-height: 416px;" /></td>

                    </tr>

                    <tr>

                         <td colspan="2">

                              <center>

                                   <img class="mktoVideoPlaybutton" src="https://app-lon03.marketo.com/images/templatePicker/play-video.png" width="128" height="128" />

                              </center>

                         </td>

                    </tr>

               </tbody>

          </table>

          <!--[if gte mso 12]>

               <img class='mktoVideoThumbnail' alt="" src="https://img.youtube.com/vi/2Lm4XMcauDE/0.jpg" width="480" height="360"/>

          <![endif]-->

     </a>

</div>

But this code does not work well on Android email app and gmail, mainly because we have no way to set the style of the <img> in an inlined way.

Any idea?

Justin Cooperman​, any hint?

-Greg

[Nicholas_Manojl]

Google's products don't do responsive.. they usually scale the desktop down so it scales. There are hacks available though: https://medium.com/cm-engineering/coding-mobile-first-emails-1513ac4673e#.nrf3v45a0

I find I can't get the video overlay to work on Outlook. When you look at the code, it looks like far too much of a CSS hack anyway. You'd be better off using an online Youtube thumbnail generator and just using an image element.

I owe Justin an email on that though.

[Grégoire_Miche2]

Hi Nicholas,

Thanks, but this is not the issue. Our emails are responsive on Google Android systems, except the video module.

Google product do support responsive provided that the styles are fully inlined. This is feasible most of the time, but not here, since the code is generated by Marketo.

-Greg

[Moritz_Trollman]

Hi Grégoire,

did you ever find a solution to this porblem ? Im facing the same issue.

BR,

Moritz

[Grégoire_Miche2]

Hi Moritz,

In fact, no. We end up not using the mktoVideo element. We use a mktoImg instead with a link to the Video page.

-Greg

[Moritz_Trollman]

Yep. Thats what we did after all too.

Would have been nice to use the feature though.

Good to see that someone else is hitting the same limits