How to insert videos in a project with NextJS and DatoCMS

Inserting videos in a NextJS project that uses DatoCMS to store data is easy.

Internal video

Upload the video in the media area and insert in the model you want as a single asset.

Example of a minimal query:

query {
  video {
    mimetype
    size
    url
    id
  }
}

With the props you get back, you can insert the video directly in the page or make a video component, like this one, which starts automatically and loops indefinitely:

const VideoInternal = ({ video }) => {
  return (
    <div>
      <video autoPlay={true} loop={true} muted={true} controls={false}>
        <source src={video.url} type={video.mimeType} />
        {"Sorry, your browser doesn't support embedded videos."}
      </video>
    </div>
  );
};

export default VideoInternal;

External video

To embed a Youtube video, for instance, make sure to include the providerUid field:

query {
  externalVideo {
    height
    url
    width
    title
    providerUid
  }
}

and then use an iframe to embed it, inserting the result of the query for the providerUid inside the value passed for the src attribute, like so:

<iframe
  width="100%"
  height="500px"
  src={`//www.youtube.com/embed/${eVideo.providerUid}?rel=0`}
  frameBorder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowFullScreen
  title={eVideo.title}
/>

Using React Player

This is an NPM package that can do the heavy lifting and can be used for internal or external applications.

install React Player with

yarn add react-player

To embed a Vimeo Player into your application just we can just set the url in the <ReactPlayer /> component.

import ReactPlayer from "react-player"

and then insert the <ReactPlayer /> component anywhere you want:

<ReactPlayer url={eVideo.url} controls={true} />

You can pass a variety of props to the component, such as controls to hide or whos player controls, loop, width, height, style and others. there is a full list ihere: https://github.com/CookPete/react-player#props