Embed video preview in post summary box on map

[jshorland]

embed should be in post summary box on map, as we do for pictures. This is a new issue produced by original embed #1452 as it was out of scope of original issue.

@willdoran is concerned about performance issues, so he proposed only a preview image and then load only when it is clicked.

@brandonrosage thoughts?

Aha! Link: https://ushahiditeam.aha.io/features/PROD-653

[brandonrosage]

The "free-form surveys" ethos is for the fields that appear in postcards to be manually chosen. I recognize that's a few months from being realized.

In any case, I'd recommend video embeds only be included in postcards if they can be presented in that context with keyframe images, with an overlaid "play" button that, when clicked, replaces the image with the embed and cues the video.

[brandonrosage]

I've pushed some support inside the .video_embed-fluid pattern for the aforementioned keyframe image + play button. It makes it possible to replace the iframe inside it with the keyframe image and play button, which would use the interaction logic I described above.

Here's an HTML example:

<div class="video_embed-fluid">
    <button class="button-beta video_embed-button">
        <svg class="iconic">
          <use xlink:href="../../img/iconic-sprite.svg#media-play"></use>
        </svg>
        <span class="button-label hidden">Play video</span>
    </button>
    <img src="https://i.ytimg.com/vi/Gt9fqKG-oiI/hqdefault.jpg?custom=true&w=168&h=94&stc=true&jpg444=true&jpgq=90&sp=68&sigh=-fh34fq0gkIb6RkHIYHHqgs66mI" />
</div>