og:video Complete Guide: Embed Video Previews in Social Link Cards

How to use og:video, og:video:type, og:video:width, and og:video:height tags so your video content renders as an inline player or rich video card on Facebook, Twitter, and Discord.

Updated March 2026

The og:video Tag Set

Open Graph supports video metadata through a set of related properties:

<!-- Core video tags -->
<meta property="og:type"          content="video.other" />
<meta property="og:video"         content="https://yoursite.com/video.mp4" />
<meta property="og:video:type"    content="video/mp4" />
<meta property="og:video:width"   content="1280" />
<meta property="og:video:height"  content="720" />

<!-- Still required: an image fallback for platforms that don't render video -->
<meta property="og:image"         content="https://yoursite.com/video-thumbnail.jpg" />
<meta property="og:title"         content="Your Video Title" />
<meta property="og:description"   content="What this video is about" />

og:type Values for Video Content

Use the appropriate og:type for your video:

video.movie — Feature-length film
video.episode — Episode of a TV show or series
video.tv_show — A TV show (series)
video.other — Any video that doesn't fit above (tutorials, clips, UGC)

Platform Behavior: What Each Platform Does

Facebook / Meta

Facebook reads og:video and can render an inline player for direct MP4 links or embedded iframes from approved video platforms. For the best result, pair it with a thumbnail image via og:image.

Twitter / X

Twitter does not use og:video for inline video. Instead, use the twitter:player card type (requires Twitter approval) or upload your video directly to X. For native embeds, Twitter reads twitter:card: player:

<!-- Twitter Player Card (requires whitelisting) -->
<meta name="twitter:card"            content="player" />
<meta name="twitter:player"          content="https://yoursite.com/embed/video-id" />
<meta name="twitter:player:width"    content="1280" />
<meta name="twitter:player:height"   content="720" />
<meta name="twitter:image"           content="https://yoursite.com/video-thumbnail.jpg" />

Discord

Discord renders video previews for direct MP4/WebM URLs. Paste a direct video URL and Discord may autoplay it inline. For structured embeds, OG tags with og:video give Discord the metadata to show a rich embed. Discord also respects the og:image fallback.

LinkedIn shows video thumbnail cards from og:image. Inline video playback from og:video is limited. For best results on LinkedIn, upload video natively.

YouTube URL Sharing — No og:video Needed

YouTube, Vimeo, and other major video platforms already include their own OG and Twitter card tags. When you share a YouTube URL, the platform's own metadata drives the preview — you don't need to add og:video to your page. However, if you're embedding their videos, consider adding an og:video pointing to the embed iframe:

<!-- Embedding a YouTube video on your page -->
<meta property="og:video"       content="https://www.youtube.com/embed/VIDEO_ID" />
<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:image"       content="https://img.youtube.com/vi/VIDEO_ID/maxresdefault.jpg" />

Full Example: Video Page with Complete OG Tags

<head>
  <title>How to Fix OG Image in React – Video Tutorial</title>
  
  <!-- Open Graph: video page -->
  <meta property="og:type"           content="video.other" />
  <meta property="og:title"          content="How to Fix OG Image in React" />
  <meta property="og:description"    content="Step-by-step tutorial for adding Open Graph meta tags to your React app and fixing social preview failures." />
  <meta property="og:url"            content="https://yoursite.com/tutorials/react-og-fix" />
  <meta property="og:image"          content="https://yoursite.com/thumbnails/react-og-fix.jpg" />
  <meta property="og:image:width"    content="1280" />
  <meta property="og:image:height"   content="720" />
  <meta property="og:video"          content="https://yoursite.com/videos/react-og-fix.mp4" />
  <meta property="og:video:type"     content="video/mp4" />
  <meta property="og:video:width"    content="1280" />
  <meta property="og:video:height"   content="720" />
  
  <!-- Twitter card -->
  <meta name="twitter:card"          content="summary_large_image" />
  <meta name="twitter:title"         content="How to Fix OG Image in React" />
  <meta name="twitter:description"   content="Step-by-step tutorial for React OG tags." />
  <meta name="twitter:image"         content="https://yoursite.com/thumbnails/react-og-fix.jpg" />
</head>

Common Mistakes

Forgetting og:image — always include an image fallback even on video pages
Using a relative URL for og:video — must be absolute HTTPS
Setting og:type: website on video pages instead of video.other
Not setting dimensions — without width/height, some platforms can't render the player correctly

Preview your video page social card →

Test my video OG tags →