Embed Video

[ThomObarski]

Would love the ability to embed video as a means to share internal projects directly though Constable.
Currently embedding something like:

<div class="wistia_responsive_padding" style="padding:56.25% 0 0 0;position:relative;"><div class="wistia_responsive_wrapper" style="height:100%;left:0;position:absolute;top:0;width:100%;"><iframe src="https://fast.wistia.net/embed/iframe/6uv82plyqo?seo=false&videoFoam=true" title="Wistia video player" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" allowfullscreen mozallowfullscreen webkitallowfullscreen oallowfullscreen msallowfullscreen width="100%" height="100%"></iframe></div></div>
<script src="https://fast.wistia.net/assets/external/E-v1.js" async></script>

Appears correctly in the previewer; but won't render on the published post

[germsvel]

@ThoughtbotThom I was looking into this briefly, and I don't think it's super straightforward to implement this without opening up the possibility of injection malicious html into posts.

Would an image with a link be a reasonable alternative in the meantime (maybe you're already doing this)? I noticed that by right-clicking on the wistia video, I could select to "copy link and thumbnail". And it came out to something like this.

<p><a href="http://localhost:4000/announcements/1370-testing-video/edit?wvideo=6uv82plyqo"><img src="https://embedwistia-a.akamaihd.net/deliveries/9c03cb4d18066733810b67e49e47ed58a32b1004.jpg?image_play_button_size=2x&amp;image_crop_resized=960x540&amp;image_play_button=1&amp;image_play_button_color=ff5454e0" width="400" height="225" style="width: 400px; height: 225px;"></a></p><p><a href="http://localhost:4000/announcements/1370-testing-video/edit?wvideo=6uv82plyqo">Marketing Strats Video Video</a></p>

Including that should work on the post.

Here's an example on staging https://staging.constable.io/announcements/124-testing-link-and-thumbnail

[cpytel]

Typically the way you'd handle this now without introducing injection is with oEmbed.

There are libraries for Elixir: https://oembed.com/#section7.3 and oEmbed is well supported across the services we regularly use.

[germsvel]

Oh very nice! I'll take a look at that.

[germsvel]

@ThoughtbotThom I don't think this fully solves your issue, but you can now add video to constable posts with iframes.

For now it's a bit of a manual process, and you'll have to modify what wistia gives you because we still don't allow the <script> tag. In the future, I hope to use oembed, so you can just add a link and we fetch the video for you.

For now, I added an example on staging where I uploaded the video you linked to in this issue. I had to tinker with the styles to style="margin:0 auto;height:20em;display:block;, so keep that in mind. But at least it's a first pass!

Example on staging: https://staging.constable.io/announcements/127-testing-out-video-via-iframe

[ThomObarski]

@germsvel not sure if you're who I should tag, but iframe embeds are broken and only showing empty containers with no content

[germsvel]

@ThoughtbotThom oh no! I'll try to take a look as soon as I can. I don't know that I'll be able to get to this today though.

[ThomObarski]

No worries. Pardon my ignorance, but why are we stripping out embed html and such? I presume it's a security thing, but if this is only accessed by our internal team is there less of a risk that we could better trust people aren't injecting malicious code?

[germsvel]

That is a really good question. @mjankowski do you have any thoughts on security if we were to just allow more stuff to make it past the Constable.CustomScrubber?

[mjankowski]

I don't know.

It's probably safe internally. In theory other people are running this since it's a public open source project, although that strikes me as unlikely?

[ThomObarski]

Way out of my depth here, but is this something we can leave up to the individual implementers, customizable or selectable levels of security to fit their needs?

[germsvel]

Yeah, I guess we could allow people to set the module to do markdown -> html conversion as a config option. That way, if they want something more restrictive, they can just declare that.

[ThomObarski]

Unrelated to video, but just posted something where even basic styling to center an image got stripped out; not a huge deal to the content being seen, but kind of a bummer and not a security threat
<img src= "https://shubox-constable-prod.s3.amazonaws.com/constable-io/d3aca847/AUGMovieNight.jpg" style="display:block; margin-left: auto; margin-right: auto;">

[germsvel]

I took a quick look this morning, and it seems that when we introduced the CustomScrubber we based it off the MarkdownHtml module rather than the Html5 one. But prior to introducing the CustomScrubber, we were using the Html5 one. So I think we may have accidentally created a more restrictive scrubber in #609, which is why Thom can't style images at all anymore.

@mjankowski what do you think if I just switch back to the html5 scrubber? The impetus for introducing the custom scrubber seems to have been to allow images to have alt tags, but I think the html5 module also handles that?