AnsweredAssumed Answered

Email 2.0: mktoVideo element generating non responsive code?

Question asked by Grégoire Michel on Jul 23, 2016
Latest reply on Oct 19, 2017 by Moritz Trollmann

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

Outcomes