> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://fastpix.com/docs/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://fastpix.com/docs/_mcp/server.

# Display a title on the video

> Display a video title within the player with the title attribute to add context, brand value, and a professional on-screen look.

Display a video title within the player with the title attribute to add context, brand value, and a professional on-screen look.

The title attribute in the `fastpix-player` element allows you to add a descriptive title that appears at the top left corner of the video player. This feature is essential for providing context to the video content or reinforcing your brand identity directly within the player interface.

\


## Why include a title?

Adding a title to your player interface serves several important purposes:

* **Contextual information**: The title provides users with immediate information about the video content they are watching, enhancing their overall viewing experience.
* **Branding opportunity**: It allows you to reinforce your brand identity by displaying your brand name or a customized title associated with the video.
* **Visual hierarchy**: By appearing prominently at the top left of the player, the title helps organize the player interface and directs user attention to key information.

\


## How to display title in FastPix player

Integrating a title into the video player is straightforward. Simply include the title attribute within the `<fastpix-player>` tag and specify your desired title text. Here’s how you can do it:

```jsx
<fastpix-player  
  title="Your Title"  
  playback-id="your-playback-id"  
  token="your-token"  
  stream-type="live-stream"  
></fastpix-player>
```

\


> PLEASE NOTE
>
> The `token` attribute is optional here. You can use it to [protect videos with private streams](/docs/video-security/secure-media-access-with-jwts).

\


**Example**

Here’s an example of integrating the `title` attribute:

```jsx
<fastpix-player  
  title="Company Webinar recording"  
  playback-id="7804a0ae84d52cfe296549b73358865f"  
  token="eyJhbGciOiJSUzI1NiIsImtpZCI6ImMwODQzODc5ZjY4ZGQ0YjgwNDYyYjBlMTdjZjJkN2IxIn0.eyJzdWIiOiI3ODA0YTBhZTg0ZDUyY2ZlMjk2NTQ5YjczMzU4ODY1ZiIsImtpZCI6ImMwODQzODc5ZjY4ZGQ0YjgwNDYyYjBlMTdjZjJkN2IxIiwiZXhwIjoiMTcyMDA5OTU2MSIsIm5iZiI6IjE3MjAwMDk1NjIifQ.dcZba9AWQBN4Iq1dkJaUhmp7iwKihTOKerz2IFuoG6X72MgsG0pb2rMxs4-EvNSVaV9MBXIwciS9mnzg7rDvIXB8CbqNdoYvmLgRAUi0MOX4hXwEefmGbQ2Youg4NlAzXKIrfqKwj4rc0sqAHootnqfx9RdHHtJ6M_8ub64cujzvG4UbYENqBc550Pt6QE-E_SDZ21s5RkS9d1KHaRHWvrlBWhS8RKXAgpZTcu_zhnmKCgUjucrbJkdo7pPhZkX0YS0a1iVKPoPa0pm2JWSFCRobG2BmcZ-K5HWYo2j03Bgh48n1TCwkp7UEqu6rq5bMx1aSLwFfBwGbu9NvQK8riA"  
  stream-type="on-demand"  
></fastpix-player> 
```

\


**For on-demand videos:**

![For live-stream videos](https://files.readme.io/29ad3a74a4e77747d9fc8cb5f8f6081c6b3778004d6993253bda9ef06e6221c0-image.png)

\


**For live-stream videos**:

![For live-stream videos](https://files.readme.io/76df675611c29d4ae626a1edb44c01741b1e6c476b1b7feb055ef0cb24a50959-image.png)