Skip to content Skip to sidebar Skip to footer
Home / Html / Video

How To Add Embedded Links To Html 5 Videos

Post a Comment
If you link a YouTube video in Discord it gets shown as a player-able video on discord and not just a link. With my videos if i link them from my website discord shows them as a li

Solution 1:

You just post a youtube url like that

https://www.youtube.com/watch?v=kNpczxZLXo8

in the chat on https://discordapp.com/. Some time later, the chat window comes up with the embedded video from youtube.

This means they have special support for youtube links and as far as they do not explicitly provide a way to do the same for other websites, you do not have any chance to recreate the same functionality.

The options i see for you are: talk to support from discordapp.com or upload your stuff to youtube.

[Edit] After contacting support, we know now that they actually do explicitly support 3rdparties to embed videos and images.

The answer from https://discordapp.com/ support came quick and spot on:

We look for Facebook open graph tags, Twitter's card tags, or oembed more information:

Facebook Opengraph Example: Paste that link into chat window:

http://harry.x-dream-media.com/opengraph2.html

Code of opengraph2.html:

   <!DOCTYPE html>
       <html>
       <meta property="og:type" content="article">
       <meta property="og:url" content="http://harry.x-dream-media.com/index.jsp">
       <meta property="fb:app_id" content="217926898242066">
       <meta property="og:video" content="http://harry.x-dream-media.com/test.m4v" />
       <meta property="og:video:width" content="640" />
       <meta property="og:video:height" content="426" />
       <meta property="og:video:type" content="application/mp4" />
       <meta property="og:video" content="http://harry.x-dream-media.com/test.m4v" />
       <meta property="og:video:type" content="video/mp4" />
       <meta property="og:video" content="http://harry.x-dream-media.com/test.m4v" />
       <meta property="og:video:type" content="text/html" />
       <meta property="og:title" content="title text">
       <meta property="og:image" content="http://harry.x-dream-media.com/test.png"/>
       <meta property="og:description"  content="description text"/>
       <meta property="og:site_name" content="site name text">

       <body>


       <style type="text/css">

       video {

          width:100%;

          max-width:600px;

          height:auto;

       }

       </style>


       <video width="100%" src="http://harry.x-dream-media.com/test.m4v" controls>

        Your browser does not support video

       </video>


       </body>

       </html>

Twitter Example: http://harry.x-dream-media.com/twitter.html?random=123

Code of twitter.html:

<!DOCTYPE html>

<html>

<head>
    <meta content='text/html; charset=UTF-8' http-equiv='Content-Type' />
    <meta name="twitter:card" content="player" />
    <meta name="twitter:site" content="@harry" />
    <meta name="twitter:title" content="CUSTOM CONTENT" />
    <meta name="twitter:description" content="Custom Descriptions can be lengthy" />
    <meta name="twitter:image" content="https://peach.blender.org/wp-content/uploads/bbb-splash.png?x11217" />
    <meta name="twitter:player" content="https://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" />
    <meta name="twitter:player:width" content="320" />
    <meta name="twitter:player:height" content="180" />
    <meta name="twitter:player:stream" content="https://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" />
    <meta name="twitter:player:stream:content_type" content="video/mp4" />
</head>
<!DOCTYPE html>
<html>
<body>
<style type="text/css">
video {
   width:100%;
   max-width:600px;
   height:auto;
}
</style>
<body>
<video width="100%" controls>
  <source src="http://harry.x-dream-media.com/test.m4v" type="video/mp4">
Your browser does not support video
</video>
</body>
</html>

Oembed Example: http://harry.x-dream-media.com/oembed.html?random=123

stay tuned...


Post a Comment for "How To Add Embedded Links To Html 5 Videos"