MediaRenderer

Parameters

The props for the component

src (required)

The src attribute specifies the URL of the media.

This can be an IPFS URI, or any URL that points to media (e.g. HTTP URL, etc.).


import { MediaRenderer } from "@thirdweb-dev/react";
 
function Home() {
  return (
    <MediaRenderer
      // highlight-next-line
      src="ipfs://QmV4HC9fNrPJQeYpbW55NLLuSBMyzE11zS1L4HmL6Lbk7X"
    />
  );
}

alt (recommended)

The alt attributes provides alternative information for the media, if a user for some reason cannot view it (due to slow connection, an error in the src attribute, or if the user is visually impaired).

The default value is "" .


import { MediaRenderer } from "@thirdweb-dev/react";
 
function Home() {
  return (
    // Any URL that points to media (IPFS URI, HTTP URL, etc.)
    <MediaRenderer
      src="ipfs://QmV4HC9fNrPJQeYpbW55NLLuSBMyzE11zS1L4HmL6Lbk7X"
      // highlight-next-line
      alt="A red circle"
    />
  );
}

poster (optional)

The poster is the image that is shown before the video is played.

The default value is the first frame of the video.

If the src is not a video, this prop is ignored.


import { MediaRenderer } from "@thirdweb-dev/react";
 
function Home() {
  return (
    // Any URL that points to media (IPFS URI, HTTP URL, etc.)
    <MediaRenderer
      src="ipfs://Qmb9ZV5yznE4C4YvyJe8DVFv1LSVkebdekY6HjLVaKmHZi"
      // highlight-next-line
      poster="ipfs://QmV4HC9fNrPJQeYpbW55NLLuSBMyzE11zS1L4HmL6Lbk7X"
    />
  );
}

controls (optional)

Show the media controls (play, pause, etc.) for the media, where applicable.

The default value is false .


import { ThirdwebNftMedia } from "@thirdweb-dev/react";
 
function Home() {
  // ... Get the NFT metadata
 
  return (
    <ThirdwebNftMedia
      metadata={metadata}
      // highlight-next-line
      controls={true}
    />
  );
}

height (optional)

The height of the rendered media.

The default value is auto .


import { ThirdwebNftMedia } from "@thirdweb-dev/react";
 
function Home() {
  // ... Get the NFT metadata
 
  return (
    <ThirdwebNftMedia
      metadata={metadata}
      // highlight-next-line
      height={500}
    />
  );
}

width (optional)

The width of the rendered media.

The default value is auto .


import { ThirdwebNftMedia } from "@thirdweb-dev/react";
 
function Home() {
  // ... Get the NFT metadata
 
  return (
    <ThirdwebNftMedia
      metadata={metadata}
      // highlight-next-line
      width={500}
    />
  );
}

requireInteraction (optional)

Require user interaction to play the media (i.e. disable autoplay).

The default value is false .


import { ThirdwebNftMedia } from "@thirdweb-dev/react";
 
function Home() {
  // ... Get the NFT metadata
 
  return (
    <ThirdwebNftMedia
      metadata={metadata}
      // highlight-next-line
      requireInteraction={true}
    />
  );
}

className (optional)

Apply custom CSS styles to the button using a class name.


import { ThirdwebNftMedia } from "@thirdweb-dev/react";
 
function Home() {
  // ... Get the NFT metadata
 
  return (
    <ThirdwebNftMedia
      metadata={metadata}
      // highlight-next-line
      className="my-custom-class"
    />
  );
}

style (optional)

Apply custom CSS styles to the button using an inline style.


import { ThirdwebNftMedia } from "@thirdweb-dev/react";
 
function Home() {
  // ... Get the NFT metadata
 
  return (
    <ThirdwebNftMedia
      metadata={metadata}
      // highlight-next-line
      style={{ backgroundColor: "red" }}
    />
  );
}

Type


let props: MediaRendererProps & RefAttributes<HTMLMediaElement>;