SvelteKit

Displaying videos

Pro tip: Start with our how-to guides first

If you're new to hosting videos on DatoCMS, we recommend first starting with our tutorials:

How to upload videos: Videos and Video Optimizations
Why you should use HLS Streaming via Mux: How to stream videos efficiently: Raw MP4 Downloads vs HLS Streaming

Then, this page provides framework-specific playback advice using our helper components. Read on when you're ready!

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} />