5 Replies Latest reply on Oct 19, 2017 11:51 PM by Moritz Trollmann (Primary)

    Email 2.0: mktoVideo element generating non responsive code?

    Grégoire Michel

      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