Home
SvelteKit
SvelteKit + DatoCMS Overview Accessing draft/updated content Managing images Displaying videos Structured Text fields SEO Management Real-time updates

SvelteKit Starter Kit

Words are nice... but code speaks louder. Dive into a fully commented project template, showcasing these techniques (and more) in action.

✅ Official

Sorry, no results found for "".

SvelteKit > Displaying videos

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:

Terminal window
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:

src/routes/+page.svelte
<script>
import { VideoPlayer } from '@datocms/svelte';


export let data;
</script>


<VideoPlayer data={data.blogPost.coverVideo.video} />
Did this doc help you?
Yes
No
Would you like to add more information?
Optional
To receive further updates or address your feedback, kindly share your email address with us.
Optional

If you need a reply, please contact support instead.

Need help?
Explore our forum, contact support, or connect with our sales team . You can also chat live with other users in our Slack channel.