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 link and not a video. I heard i need to have embedded links in it but i don't know what I'm looking for or how to make or add those in. Anyone able to help me? Here is my current code for my videos:
<video poster="Images/logo.jpg" controls controlsList="nodownload noaudio" preload="none">
<source src="videos/logo.mp4" type="video/mp4"> Your browser does not support the video tag.
</video>
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:
https://developers.facebook.com/docs/sharing/webmasters#markup
Facebook Opengraph Example:
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>
https://dev.twitter.com/cards/markup
Twitter Example:
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>
http://oembed.com/#section2
Related
what meta tag use for in HTML page to show this image while share contnet.
<html lang="en" prefix="og: https://images.railyatri.in/ry-logo.png">
<meta src="https://images.railyatri.in/ry-logo.png">
<meta property="og:image" content="https://images.railyatri.in/ry-logo.png" />
<meta property="og:image:secure_url" content="htt
ps://images.railyatri.in/ry-logo.png" />
<meta property="og:image:width" content="200" />
<meta property="og:image:height" content="150" />
<meta property="og:image:alt" content="RailYatri Logo" />
<meta charset="utf-8">
this not working
I'm looking to embed images in an html file so that they show up as a preview on Twitter once the link is posted.
Currently, I have written this HTML file, but the image included in the meta tag does not display after the link is posted, how can I do this?
Here is my code:
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<title>Embedded Image Test</title>
<meta name="twitter:image:" content="https://teotihuacan-media.com/images/bck.jpg">
<meta name="twitter:image:alt" content="A simple image">
<meta name="twitter:site:"Lorem IpsTest Website",>
<meta name="twitter:description" content="Welcome lorem ipsum dolore">
<HEAD>
<TITLE>Lorem IpsTest Website</TITLE>
</HEAD>
<BODY>
<CENTER><p>izudfhzaiufhnzaouif 5645</p></CENTER>
<CENTER><img src="https://teotihuacan-media.com/images/bck.jpg" alt="Ipsum doleane"></CENTER>
</BODY>
</html>
Based on the docs, it looks like you're missing two required meta tags:
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="Title Goes Here" />
Your twitter:site tag is also incorrectly formatted - it should be this:
<meta name="twitter:site" content="Lorem IpsTest Website">
The opening <head> tag should also be moved to right after the opening <html> tag in order to encompass the meta tags. I'm also unsure why you have two <title> tags - get rid of one of them.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Embedded Image Test</title>
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="Embedded Image Test" />
<meta name="twitter:image" content="https://teotihuacan-media.com/images/bck.jpg">
<meta name="twitter:image:alt" content="A simple image">
<meta name="twitter:description" content="Welcome lorem ipsum dolore">
</head>
<body>
<p>izudfhzaiufhnzaouif 5645</p>
<img src="https://teotihuacan-media.com/images/bck.jpg" alt="Ipsum doleane">
</body>
</html>
for more information about twitter cards read this https://sproutsocial.com/insights/twitter-cards/
I encountered a strange behavior for #RenderSection in the head section of _Layout.
#section AddToHead{
<meta name="test" />
<open-graph og-title="#Model.Test.OG.Title" og-image="#Model.Test.OG.Image" og-url="#Model.Test.OG.Url" og-type="#Model.Test.OG.Type"></open-graph>
}
meta => is plain html
open-graph => is a taghelper which returns html
and added on _Layout
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
#await RenderSectionAsync("AddToHead", required: false)
</head>
I tried already with RenderSectionAsync and RenderSection. No difference.
When I check the result on page it is as follows (total different result)
View Source Code
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="test" />
<div><meta property='og:title' content='TestTitle' /><meta property='og:type' content='Article' /><meta property='og:url' content='TestURL' /><meta property='og:image' content='TestBild' /></div>
</head>
Developer Tools
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="test" />
</head>
<body>
<div><meta property='og:title' content='TestTitle' /><meta property='og:type' content='Article' /><meta property='og:url' content='TestURL' /><meta property='og:image' content='TestBild' /></div>
</body>
Facebook sees my site like Developer Tools does.
What I'm doing wrong? Is this even possible?
Developer tools shows how the browser interprets your HTML which is why you're seeing a difference between viewing source and the developer tools.
As for why that's happening, <div> tags in the <head> are problematic. Most browsers these days will interpret those <div> tags as if they were in the body. If you were to render your <meta /> tags without the surrounding div all should be fine.
I've been trying other people's examples of how to share a webpage with a video on it to facebook, and hoping that the video can play inline in the facebook wall. So far in each of my attempts, facebook only shows the meta information text of my webpage on the profile feed, but doesn't show a video. Here's my HTML code:
<!DOCTYPE html>
<html xmlns:og="http://ogp.me/ns#">
<head>
<title>Ocean Vid</title>
<meta property="og:type" content="video" />
<meta property="og:video:type" content="video/mp4" />
<meta property="og:video:width" content="500" />
<meta property="og:video:height" content="500" />
<meta property="og:video" content="https://mywebapp.com/video/oceans.mp4" />
<meta property="og:video:secure_url"
content="https://mywebapp.com/video/oceans.mp4" />
</head>
<body>
</body>
</html>
What am I doing wrong?
I got it working. From what I can tell, this is the minimum to get HTML5 video to post on facebook
<!DOCTYPE html>
<html>
<head>
<title>Ocean Video</title>
<meta property="og:image" content="http://vjs.zencdn.net/v/oceans.png" />
<meta property="og:type" content="video" />
<meta property="og:video:type" content="video/mp4" />
<meta property="og:video" content="http://vjs.zencdn.net/v/oceans.mp4" />
<meta property="og:video:secure_url" content="https://mycoolwebsite.com/video/oceans.mp4" />
</head>
<body>
</body>
</html>
In my case, I needed to make sure I had both a thumbnail image and a secure_url for a video.
Video shared perfect but video play in new window but I want play video in same Facebook page.
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="https://www.facebook.com/2008/fbml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta property="og:video" content="http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf?config={'clip':{'url':'http://103.231.125.106/nesos/videoappsuser/150930171515SampleVideo_1080x720_1mb.mp4'}}" />
<meta property="og:video:secure_url" content="https://releases.flowplayer.org/swf/flowplayer-3.2.18.swf?config={'clip':{'url':'https://103.231.125.106/nesos/videoappsuser/150930171515SampleVideo_1080x720_1mb.mp4'}}" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
<meta property="og:video:width" content="400" />
<meta property="og:video:height" content="300" />