Skip to main content

IPFS Media Renderer

The IPFS Media Renderer component resolves any IPFS URI that contains a media file (such as an image, video, or audio file) and renders the relevant component to show that media. This is especially useful for two use cases:

  1. Displaying the media assets of NFTs with metadata stored on IPFS
  2. Rendering NFTs where you are unsure of the file type (i.e. you don't know if it's an image or video)
import { MediaRenderer } from "@thirdweb-dev/react";

const Component = () => {
return (
alt="A mp4 video"


srcRequiredThe URI of the mediastring
posterOptionalThe media poster image uri. (if applicable)string
controlsOptionalShow the media controls (where applicable) (default false)boolean
heightOptionalHeight of the element to renderstring
widthOptionalWidth of the element to renderstring
requireInteractionOptionalRequire user interaction to play the media. (default false)boolean
styleOptionalAdditional CSS to style the rendered elementCSSProperties


Learn how to integrate the MediaRenderer component into your application.