Making link previews work for embedded videos

community_wiki · February 8, 2019, 11:13pm

This topic is a linked part of a larger work: “Discourse Website Manual for edgeryders.eu”

Content

1. Introduction
2. Instructions
3. Example

1. Introduction

This topic shows how to add an embedded video to a Discourse topic in such a way that a link preview picture appears when sharing the topic on Facebook or other platforms that support the Open Graph protocol.

Facebook etc. does not generate a screenshot of an embedded video to show as the link preview, so our workaround is to do this manually and embed the screenshot as well – but in such a way that only websites see it, not people.

Note: This howto uses the new, Markdown based markup for images in Discourse. You can easily adapt it to the <img src="…"> HTML markup that DIscourse used earlier.

2. Instructions

Create the topic with your video. As usual, to embed your video simply post a link to your video on its own line, with no whitespace in front of the link, and with an empty line above it. This works for YouTube, Vimeo and a few other video sharing platforms. If it does not work for a platform you use regularly, a Discourse software admin can fix that for you.
Try if Facebook will pick up a thumbnail picture. Because for some videos at least from YouTube, Facebook will pick up the video thumbnail automatically and use it as a link preview picture. This could depend on video popularity: if you embedded a popular video, Facebook will have a thumbnail picture in its database already and use that. If the video is not popular and it does not have a video thumbnail already, Facebook will however not generate one.
Create a screenshot of your video. Simply stop the video, create a screenshot, crop to the video boundaries, and save as a JPG image.
Add the screenshot to your topic. Upload it like you upload any picture. It will result in code like the following:
```
 ![VideoThumbnailExample|690x326](upload://6KZkUo9JM73CvgBz3vyHQN2Wrvi.jpeg)
```
Hide the screenshot from humans. For that, hide the image’s markup inside [details=(video preview thumbnail)] … [/details]. It will for example look like this:
```
[details=(video preview thumbnail)]
    ![VideoThumbnailExample|690x326](upload://6KZkUo9JM73CvgBz3vyHQN2Wrvi.jpeg)
[/details]
```
Share the link to the topic on Facebook or another website that supports Open Graph for link previews. If no preview appears the first time on Facebook, try again a few minutes later because Facebook needs time to create and sort in a link preview image (details).

3. Example

My absolute favourite classical music

To share this topic on Facebook and see that it creates a proper link preview picture, you can copy & paste this URL: https://edgeryders.eu/t/id/9473

(video preview thumbnail)