SvelteKit

Displaying videos

One of the advantages of using DatoCMS instead of other content management systems is its video query, which will return pre-computed video attributes that will help you display videos in your frontend without any additional manipulation.

To make it easy to offer optimized, progressive videos on your projects, we offer a package called @datocms/svelte that exposes a <VideoPlayer /> component and pairs perfectly with the video query.

To take advantage of it, install the following packages:

yarn add @datocms/svelte @mux/mux-player

Before using the video player component, it is necessary to obtain the necessary data by running a GraphQL query:

1
const query = `
2
  query HomeQuery {
3
    blogPost {
4
    title
5
    coverVideo {
6
      video {
7
        # required: this field identifies the video to be played
8
        muxPlaybackId
9

10
        # all the other fields are not required but:
11

12
        # if provided, title is displayed in the upper left corner of the video
13
        title
14

15
        # if provided, width and height are used to define the aspect ratio of the
16
        # player, so to avoid layout jumps during the rendering.
17
        width
18
        height
19

20
        # if provided, it shows a blurred placeholder for the video
21
        blurUpThumb
22
      }
23
    }
24
  }
25
`;
26

27
export const load = () => {
28
  return executeQuery(query);
29
};

Then, inside your page, feed content coming from a video query directly into the <VideoPlayer /> component:

<script>
import { VideoPlayer } from '@datocms/svelte';

export let data;
</script>

<VideoPlayer data={data.blogPost.coverVideo.video} />