How do Video Preview Links work

General Questions
#1

I like the feature where when someone pastes a link to an YouTube video, the client automatically embeds the video in the chat window and you can watch it right then and there.

How does that work? The reason I am asking is we have an internal video portal “similar” to YouTube but posting links to that does nothing. So is the Mattermost client recognizing the YouTube link and using some API calls to handle that embedding? Is it possible to somehow extend that functionality to handle our internal video portal site?

Thanks!

#2

You need to use opengraph metadata http://ogp.me/ so it reads the information and posts back.

So not all websites use that thus only some will render the preview.

If you click to view the source code of a video on youtube you will see those metatada there.

#3

I looked at YouTube video source and do not find any og:video meta properties. Am I missing something? So when a user pastes a link into Mattermost chat, Mattermost, loads the metadata from the link and if there is opengraph metadata it uses it to load a preview?

#4

Here is an example, on this video https://www.youtube.com/watch?v=ih2xubMaZWI

        <meta property="og:site_name" content="YouTube">
      <meta property="og:url" content="https://www.youtube.com/watch?v=ih2xubMaZWI">
    <meta property="og:title" content="OMFG - Hello">
    <meta property="og:image" content="https://i.ytimg.com/vi/ih2xubMaZWI/maxresdefault.jpg">

      <meta property="og:description" content="&#39;Feeling Sheepish&#39;...http://bit.ly/SuicideSheepSpotify MERRY CHRISTMAS!!!! Download... https://bitly.com/alexomfghello OMFG https://soundcloud.com/alexomfg h...">

    <meta property="al:ios:app_store_id" content="544007664">
    <meta property="al:ios:app_name" content="YouTube">
      <meta property="al:ios:url" content="vnd.youtube://www.youtube.com/watch?v=ih2xubMaZWI&amp;feature=applinks">

      <meta property="al:android:url" content="vnd.youtube://www.youtube.com/watch?v=ih2xubMaZWI&amp;feature=applinks">
    <meta property="al:android:app_name" content="YouTube">
    <meta property="al:android:package" content="com.google.android.youtube">
    <meta property="al:web:url" content="https://www.youtube.com/watch?v=ih2xubMaZWI&amp;feature=applinks">

    <meta property="og:type" content="video">
        <meta property="og:video:url" content="https://www.youtube.com/embed/ih2xubMaZWI">
        <meta property="og:video:secure_url" content="https://www.youtube.com/embed/ih2xubMaZWI">
        <meta property="og:video:type" content="text/html">
        <meta property="og:video:width" content="1280">
        <meta property="og:video:height" content="720">
        <meta property="og:video:url" content="http://www.youtube.com/v/ih2xubMaZWI?version=3&amp;autohide=1">
        <meta property="og:video:secure_url" content="https://www.youtube.com/v/ih2xubMaZWI?version=3&amp;autohide=1">
        <meta property="og:video:type" content="application/x-shockwave-flash">
        <meta property="og:video:width" content="1280">
        <meta property="og:video:height" content="720">

        <meta property="og:video:tag" content="MrSuicideSheep">
        <meta property="og:video:tag" content="OMFG Hello">
        <meta property="og:video:tag" content="OMFG">
        <meta property="og:video:tag" content="Electro House (Musical Genre)">
        <meta property="og:video:tag" content="Electro">
        <meta property="og:video:tag" content="8bit Music">
        <meta property="og:video:tag" content="Chiptune (Musical Genre)">
        <meta property="og:video:tag" content="Bass">
        <meta property="og:video:tag" content="Electronic">

    <meta property="fb:app_id" content="87741124305">

        <meta name="twitter:card" content="player">
    <meta name="twitter:site" content="@youtube">
    <meta name="twitter:url" content="https://www.youtube.com/watch?v=ih2xubMaZWI">
    <meta name="twitter:title" content="OMFG - Hello">
    <meta name="twitter:description" content="&#39;Feeling Sheepish&#39;...http://bit.ly/SuicideSheepSpotify MERRY CHRISTMAS!!!! Download... https://bitly.com/alexomfghello OMFG https://soundcloud.com/alexomfg h...">
    <meta name="twitter:image" content="https://i.ytimg.com/vi/ih2xubMaZWI/maxresdefault.jpg">
    <meta name="twitter:app:name:iphone" content="YouTube">
    <meta name="twitter:app:id:iphone" content="544007664">
    <meta name="twitter:app:name:ipad" content="YouTube">
    <meta name="twitter:app:id:ipad" content="544007664">
      <meta name="twitter:app:url:iphone" content="vnd.youtube://www.youtube.com/watch?v=ih2xubMaZWI&amp;feature=applinks">
      <meta name="twitter:app:url:ipad" content="vnd.youtube://www.youtube.com/watch?v=ih2xubMaZWI&amp;feature=applinks">
    <meta name="twitter:app:name:googleplay" content="YouTube">
    <meta name="twitter:app:id:googleplay" content="com.google.android.youtube">
    <meta name="twitter:app:url:googleplay" content="https://www.youtube.com/watch?v=ih2xubMaZWI">
      <meta name="twitter:player" content="https://www.youtube.com/embed/ih2xubMaZWI">
      <meta name="twitter:player:width" content="1280">
      <meta name="twitter:player:height" content="720">

You can see og:site_name, og:title, og:url, etc…

For sites, those are the information used to provide the information on mattermost, when u post a link to some post or news from some site.

#5

Thanks for the example. For some reason when I do view-source in Chrome I don’t see the metadata you pasted (view-source:https://www.youtube.com/watch?v=ih2xubMaZWI) Any idea what I am doing wrong?

#6

Works fine on chrome for me:

chrome
sLugv2V.png1032×707 85.9 KB

Also visible using the developer’s tool of chrome:

chrome dev
W3cm2VH.png955×273 35.9 KB

In either case, those are the attributes you need on your site.

#7

Ok I have confirmed the link I am trying has the meta tags. But it still does not embed the video. Any ideas? I am on Mattermost 3.10.0, could this be the issue? YouTube still works fine.

image

#8

Would you mind sending a PM with the link so I can check and see if I get the same result and perhaps what is missing?

#9

Th elink is internal to our network, but I found the same video provider external. Here is a link to test:

I am including a youtube link here, because it seems even the forum might behave the same way :slight_smile:

#10

The best guess I have at this point is the difference in the type:

<meta property="og:video:type" content="video/mp4" />
vs.
<meta property="og:video:type" content="video" />

#11

Oh, I think I misread you, you want it to read the page and post the video the same way it does for youtube, in that case I am afraid its not possible.

For youtube, it uses a specific code for that purpose as seen here, whereas for when you send a non-youtube URL it uses the Open Graph for parsing the link and posting information from it.

So it would look something like this:

For that to work you need to enable link previews in the Admin Console as well as the advanced setting in the user account settings.

#12

I see, yes I was able to get the link preview to work with the og meta tags but it would be great if the embedding of the video would work as well. This seems to work ok on Facebook regardless of the URL :slight_smile: seems like they just do the video preview purely in the OG tags.

#13

I am not familiar with Open Graph, but I think that is something facebook does internally you would have to check how they render the link, by inspecting it perhaps they further open a embed iframe or something which would be it.

I will give a look at the Open Graph code used on mattermost to see if it does anything different with videos as well.

Well I tried with a random facebook video and it doesn’t convert it into a video like u said above:

test
zSr9Ztj.png800×147 24.5 KB

Perhaps you can provide me with a facebook URL that does?

I’ve also checked the open graph code and don’t see anything special there for videos.

There is however, a file preview for files you have uploaded directly that will preview it as video/audio if the file type is such.

#14

What I meant is that when I post the Kaltura video on Facebook it embeds it as a video and can be previewed on Facebook itself.

#15

Thanks for the enlightning, guys!