Making link previews work for embedded videos

manual-section

#1

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

  1. 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.

  2. 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.

  3. Create a screenshot of your video. Simply stop the video, create a screenshot, crop to the video boundaries, and save as a JPG image.

  4. 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)
    
  5. 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]
    
  6. 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 :laughing:

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)


:green_book: Discourse User Manual for edgeryders.eu