Product Updates

DatoCMS changelog for new features and general improvements
Images APIContent Delivery API
A <VideoPlayer /> for everyone
February 29th, 2024

We've released new <VideoPlayer /> components for React, Vue and Svelte. 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 web component.

Given a query like this:

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

It's possible to display the video with:

React, Next.js, Remix

import React from 'react';
import { VideoPlayer } from 'react-datocms';
<VideoPlayer data={data.blogPost.cover.video} />

Vue, Nuxt

import Vue from 'vue';
import { DatocmsVideoPlayerPlugin } from 'vue-datocms';
Vue.use(DatocmsVideoPlayerPlugin);
<datocms-video-player :data="data.blogPost.video" />

Svelte, SvelteKit

import { VideoPlayer } from '@datocms/svelte';
<VideoPlayer data={data.blogPost.cover.video} />