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:

// src/routes/+page.server.ts
const query = `
  query HomeQuery {
    blogPost {
    title
    coverVideo {
      video {
        # required: this field identifies the video to be played
        muxPlaybackId
  
        # all the other fields are not required but:
  
        # if provided, title is displayed in the upper left corner of the video
        title
  
        # if provided, width and height are used to define the aspect ratio of the
        # player, so to avoid layout jumps during the rendering.
        width
        height
  
        # if provided, it shows a blurred placeholder for the video
        blurUpThumb
      }
    }
  }
`;
export const load = () => {
  return executeQuery(query);
};

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

<script>
// src/routes/+page.svelte
import { VideoPlayer } from '@datocms/svelte';
export let data;
</script>
<VideoPlayer data={data.blogPost.coverVideo.video} />