# A <VideoPlayer /\> for everyone

[date: 2024-02-29T15:00:57.320+01:00]

We've released new `<VideoPlayer />` components for [React](https://github.com/datocms/react-datocms/blob/master/docs/video-player.md), [Vue](https://github.com/datocms/vue-datocms/tree/master/src/components/VideoPlayer) and [Svelte](https://github.com/datocms/datocms-svelte/tree/main/src/lib/components/VideoPlayer). The component makes it straightforward to display a video from data retrieved from the GraphQL API, and acts as a wrapper around [Mux's video player](https://github.com/muxinc/elements/blob/main/packages/mux-player/README.md) web component.

Given a query like this:

```plaintext
query {
  blogPost {
    title
    cover {
      video {
        muxPlaybackId
        title
        width
        height
        blurUpThumb
      }
    }
  }
}
```

It's possible to display the video with:

### React, Next.js, Remix

```jsx
import React from 'react';
import { VideoPlayer } from 'react-datocms';

<VideoPlayer data={data.blogPost.cover.video} />
```

### Vue, Nuxt

```jsx
import Vue from 'vue';
import { DatocmsVideoPlayerPlugin } from 'vue-datocms';

Vue.use(DatocmsVideoPlayerPlugin);

<datocms-video-player :data="data.blogPost.video" />
```

### Svelte, SvelteKit

```jsx
import { VideoPlayer } from '@datocms/svelte';

<VideoPlayer data={data.blogPost.cover.video} />
```