Video files in my prismic site

I am using Prismic, NextJs, SliceMachine latest version.
I looking for best solution for Implement Video to my site from Media Library.
When I using link component then get an error:

Property 'url' does not exist on type 'LinkField'.
Property 'url' does not exist on type 'EmptyLinkField<"Any">'.

My Code:

import { Content } from "@prismicio/client";
import { SliceComponentProps } from "@prismicio/react";
import Bounded from "@/components/Bounded";

 * Props for `Video`.
export type VideoProps = SliceComponentProps<Content.VideoSlice>;

 * Component for "Video" Slices.

const Video = ({ slice }: VideoProps): JSX.Element => {

  return (
      <video playsInline autoPlay muted loop>
        <source src={} type="video/mp4" />

export default Video;

How can I fix this issue or what is best way to implement video file?

Hi Reszo,

I suspect that the problem is because the video field might be unfilled, therefore will be undefined. You could guard against this like:

(prismic.isFilled.linkToMediaField( &&
  <source src={} type="video/mp4" />

(I haven't tested the code, but it should look something like that.)

However, I should also warn: serving videos from the Media Library can very quickly eat up your bandwidth allowance. You might want to consider a dedicated video hosting service, like YouTube, Vimeo, or Wistia. If you do choose to host your videos on Prismic, keep a close eye on your bandwidth usage.


Hi Sam,
Thank you for your quick answer. is defined as object.
Looks all good and working in localhost but it has an error when I build it.
Please follow my screenshot from VSCode

Looks like didn't see .url not sure why because it is working in localhost.

Thank You

Hi Sam,
I changed prismicio-types.d.ts


export interface VideoSliceDefaultPrimary {
video: prismic.LinkField;


export interface VideoSliceDefaultPrimary {
video: prismic.LinkField.url;

Problem solved.

Hi @rezso.dubiczki,

That won't solve the problem. prismicio-types.d.ts is auto-generated by Slice Machine. The next time you make a change in Slice Machine, your change will be overwritten.

In my last comment, I suggested that you use prismic.isFilled.linkToMediaField() to create a guard. Did you try this?