Show video-thumbnail instead of static image when sharing a link

Question

On my website, I have some OpenGraph metadata so I can customize the thumbnail, title, and description for when it is shared in social networks or messaging apps:

<meta property="og:title" content="Title" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://mypage.com" />
<meta property="og:image" content="http://mypage.com/path/to/thumb.png" />
<meta property="og:description" content="Description of my page" />

The other day, sending messages via Messages/iMessage on iOS, I found that some shared links (not from my site) play a muted video instead of an static image as a thumbnail (it seems to happen since iOS 10). Here is an example from an Amazon link:

Is there a way to specify that instead of using a static image as a thumbnail, the app should use a video? Either using OpenGraph tags or a different system. I tried using this, but it doesn't seem to work:

<meta property="og:video" content="http://mypage.com/path/to/video.mp4" />

Also, I haven't been able to replicate this effect in a messaging system different than iMessage (I tried with Google Chat, Skype, WhatsApp, GMail...) and I have only seen the videos when it's an Amazon link, but looking at the source code I don't see anything that indicates that a video should be taken or which one (there are several, iMessage picked the first one), and I haven't found related information online. Maybe it's something that only works between Apple and Amazon, I wonder if it's something that any site could use.

Answer 1

I was using the right tag (og:video), but the problem was the file size of the video.

According to Apple's "Best Practices for Link Previews in Messages" Technical Note, both og:video or twitter:player:stream would work to add a video preview to a message (emphasis mine):

Videos in link previews

• Putting a direct link to your video asset in the Open Graph metadata is better than referencing an embeddable video page. With the direct link to video, Messages will load and display fast, and use the system user interface for video playback.
• If the link preview machinery encounters a og:video or twitter:player:stream that points to a downloadable single media asset (for example, an MPEG-4 file) that can be played, it will attempt to download the video and automatically play it back.
• Video that can be streamed but not downloaded (such as HTTP Live Streams or QuickTime Reference Movies) will still play inline, but require the user to tap to start playback. Video that requires embedding HTML or plug-ins will not play inline.

And at the bottom of the page, it is specified that there are some limits for the linked media, and in particular there is a limit of 1MB per resource that I was not following (emphasis mine):

Limits

• All limits are subject to change at any point in time; use these only as guidelines.
• Icons should be square, and at least 108px per side.
• Images should be at least 900px in width.
• Images less than 150px in width will not be used, or may be presented as icons.
• The main resource located at the link is limited to 1MB. The total size of sub-resources (the icons, images, and videos which are selected as most interesting) is limited to 10MB.