Feature/support twitter videos

[djmaze]

Summary

This PR changes the handling of twitter posts with embedded videos. Instead of linking to a still image of the video, a HTML video element (with preload="none" for data privacy) is embedded into the post.

(refs heiseonline/embetty-server#33)

Update: Firefox' "Tracking Protection" blocks the inline video. As a workaround, videos are now linked to instead of embedded in Firefox.

Motivation

The current twitter video handling is broken (see above).

Review

Embed a twitter post which includes a video.

[StevenKowalzik]

Hi,

thanks for the PR! However, i'm not seeing a video-preview while my browser window exceeds 600px, removing:

@media (min-width: 600px)
<style>
:host #media {
    display: grid;
    grid-column-gap: 1px;
    grid-row-gap: 1px;
}

makes it work on the example site. Could you fix this issues and maybe implement a test that tests your implementation?

[djmaze]

@StevenKowalzik The twitter tests are all failing locally for me, and AFAICS they fail for all other open PRs here as well. Maybe there is a general problem? I have almost no experience with javascript testing tools, so maybe someone else could have a look at that first?

[compeak]

@djmaze You need Twitter credentials to run the tests: https://github.com/heiseonline/embetty-server#configuration

Travis CI does not set secrets for builds triggered by pull requests to prevent exfiltration. This makes the Twitter tests fail for pull requests and succeed after they have been merged.

[StevenKowalzik]

@djmaze I thought about your proposed changes. The preload attribute for the video element is just a hint for the browser, it does not force the browser to act that way. A solution similar to the way embetty implements videos may be a better way in my opinion (create dummy playbutton/onclick event)