foundation / inky

Convert a simple HTML syntax into tables compatible with Foundation for Emails.
http://foundation.zurb.com/emails
676 stars 108 forks source link

Does inky have support for html5 video? #81

Closed ZeeCoder closed 6 years ago

ZeeCoder commented 7 years ago

I was surprised to realise that embedding html5 video in an email with an image fallback is totally doable. However there seem to be certain caveats to keep in mind: https://www.emailonacid.com/blog/article/email-development/a_how_to_guide_to_embedding_html5_video_in_email

It would be nice if I could just drop in a video tag and have inky deal with the fallback hacks.

rafibomb commented 7 years ago

Yes! This could be part of Inky for sure.

We'll need to pass in some attributes to Inky:

<video width="" height="" preview-img="" video-source="" fallback-img="" fallback-img-link=""></video>

And it will spit out something like this:

<!-- video section initially hidden -->
<div class="video-wrapper" style="display:none;">
  <p>Video Content: MP4</p>
<video width="320" height="176" controls poster="http://www.emailonacid.com/images/blog_images/Emailology/2013/html5_video/bunny_cover.jpg">
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
      <!-- fallback 1 -->
      <a href="http://www.emailonacid.com" ><img height="176" 
        src="http://www.emailonacid.com/images/blog_images/Emailology/2013/html5_video/bunny_backup.jpg" width="320" /></a>
</video>
</div>
<!-- fallback section initially displayed -->
<div class="video-fallback">
  <p>Fallback Content</p>
  <a href="http://www.emailonacid.com" ><img height="176" 
    src="http://www.emailonacid.com/images/blog_images/Emailology/2013/html5_video/bunny_backup.jpg" width="320" /></a>
</div>

Did I miss anything? Have you tested this method in your campaigns? Are you able to add this feature?

ZeeCoder commented 7 years ago

That looks about right, but we simply went with attaching the video instead. Email client support seemed too dodgy.

So I can't really say if that works or not, but I'll pitch it again next time we do something similar. 👍

rafibomb commented 7 years ago

This might be perfect for our Playground - are you able to send an example of the email you created or share the code?

ZeeCoder commented 6 years ago

Ah sorry, I've just realised never answered 😅 So the company lost interest in this mostly because of the dodgy support of videos in emails.

I can close the issue unless you want to keep it open.