{"id":28457,"date":"2023-06-02T07:00:00","date_gmt":"2023-06-02T14:00:00","guid":{"rendered":"http:\/\/Autoplay-a-Video-on-a-Next.js-Landing-page"},"modified":"2025-02-08T18:01:33","modified_gmt":"2025-02-09T02:01:33","slug":"autoplay-a-video-on-a-next-js-landing-page","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/autoplay-a-video-on-a-next-js-landing-page","title":{"rendered":"Autoplay a Video on a Next.js Landing page"},"content":{"rendered":"

In modern web pages and platforms, a less than stellar user experience could lead to a significant drop in conversion. This can be said for media content, including videos and images.<\/p>\n

So how do you improve the user experience of video content on your application?<\/p>\n

This article outlines how to autoplay video content when a user scrolls to the video on a Next.js page. We\u2019ll use the Cloudinary video player<\/a> to render the video.<\/p>\n

\nNext.js is a React framework that enables server-rendered and static web applications to be built. It’s used by renowned companies such as Netflix, Uber, and Airbnb. This framework is not just about enhancing the user experience with media content but offers a comprehensive solution for building both dynamic and static websites. Some of its standout features include server-side rendering, which can significantly boost the performance of your website, especially for pages that aren’t updated frequently. Additionally, Next.js supports hot reloading, ensuring that changes to your code are instantly visible in the browser without a server restart. This feature is particularly beneficial during the development phase. Furthermore, with built-in routing, creating and managing website navigation becomes a breeze. For those who prefer using TypeScript, Next.js has got you covered, enhancing the maintainability of your code.\n<\/p>\n

Cloudinary<\/a> provides a robust media experience for any media type, covering image and video uploads, storage, and optimizations. With Cloudinary, you can store and render your video assets on a Next.js landing page.<\/p>\n

Sandbox<\/h2>\n

You can find a complete version of the application on Codesandbox.<\/a><\/p>\n\n<\/div>\n\n\n

\n <\/iframe>\n <\/div>\n\n\n

Prerequisites and Installation<\/h2>\n

To get the most out of this article, you should have basic knowledge of JavaScript and React and understand Next.js.<\/p>\n

\nGetting Started with Next.js: <\/strong>Installing and setting up Next.js is straightforward. With just a single command, you can have Next.js installed and ready to go. Once installed, you can kick off your website development by creating a new React project. For beginners or those looking for a quick start, Next.js offers several starter projects. These projects can serve as a foundation, allowing you to build upon them and customize as per your requirements.\n<\/p>\n

To get started, we\u2019ll install the Next.js CLI, and create a new Next application using NPX \u2014 a node package runner. You can also use yarn to install packages and create a new project. Next.js ships with starters, and we\u2019ll use the Next.js defaulter starter in our application.<\/p>\n

To get a Next.js project started, navigate to your desired directory and run the command below:<\/p>\n

    npx create-next-app \n<\/code><\/span><\/pre>\n
The command above will return an input, asking you for the project name. You can use your desired project name. Once done, it will create a Next.js project using the default starter.<\/p>\n
We\u2019ll use the Cloudinary video player shipped in the cloudinary-react<\/code> package. The video player is efficient because we can use a public ID that\u2019s a unique identifier of the video on Cloudinary. We\u2019ll use this ID to fetch our uploaded video asset and build dynamic delivery. Also, robust video transformations from Cloudinary are available when using the video player.<\/p>\n
Proceed to install the following dependencies using the command below:<\/p>\n
    npm install Cloudinary-react react-intersection-observer \n<\/code><\/span><\/pre>\n
cloudinary-react<\/code>  is a Software Development Kit (SDK) that allows us to seamlessly utilize Cloudinary\u2019s image and video features in a React app.<\/p>\n
react-intersection-observer<\/a> tells us when an element enters or leaves a particular viewport. This is essential to know when our video player is in view.<\/p>\n
Creating the Video Player<\/h2>\n
First, we\u2019ll create a new directory called Videoplayer<\/code> in our app\u2019s src\/components directory. Next, we\u2019ll create a file called VideoPlayer.jsx<\/code> that will house the video player component. Then, we\u2019ll import the required dependencies using in the component with:<\/p>\n
    \/\/ src\/components\/Videoplayer\/VideoPlayer.jsx<\/span>\n    import<\/span> React, { useEffect, useref } from<\/span> \"react\"<\/span>;\n    import<\/span> { Video, CloudinaryContext } from<\/span> \"Cloudinary-react\"<\/span>;\n    import<\/span> { useInView } from<\/span> \"react-intersection-observer\"<\/span>;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
react-intersection-observer<\/a> is a declarative wrapper component for Intersection observer API.<\/p>\n
We\u2019ll create a function component for the video player, which takes in a video ref. The component will return a Cloudinary Video<\/code> component wrapped in a Cloudinary Context component. CloudinaryContext<\/code> allows you to define shared parameters that apply to all child elements.<\/p>\n
Let\u2019s add the snippet below to our VideoPlayer<\/code> component:<\/p>\n
    const<\/span> VidPlayer = React.memo(({ videoref }<\/span>) =><\/span> {\n      return<\/span> (\n        <CloudinaryContext<\/span> cloud_name<\/span>=\"codedog\"<\/span>><\/span>\n          <Video<\/span>\n            publicId<\/span>=\"videoplayer-demo\"<\/span>\n            width<\/span>=\"100%\"<\/span>\n            controls<\/span>\n            innerref<\/span>={videoref}<\/span>\n          \/><\/span>\n        <\/CloudinaryContext<\/span>><\/span><\/span>\n      );\n    });\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
In the code above, our component is wrapped in React.memo<\/code>.<\/p>\n
The Cloudinary context specifies the cloud_name, with which we fetch media assets from Cloudinary. To obtain your cloud_name, you need to create an account on Cloudinary<\/a>, and get the cloud name value from your Cloudinary dashboard.<\/p>\n
We also specified options for our video player, including the publicId<\/code> of our video on Cloudinary.<\/p>\n
Handling Video Interaction With Intersection-observer<\/h2>\n
In src\/components\/VideoPlayer.jsx, we\u2019ll create a function component named VideoPlayer<\/code>. Inside it, we\u2019ll use the useInView<\/code> hook, imported from react-intersection-observer<\/code> to track a DOM element for when it gets in view.<\/p>\n
    const<\/span> VideoPlayer = ()<\/span> =><\/span> {\n      const<\/span> videoref = useref();\n      const<\/span> { ref, inView } = useInView({\n        threshold<\/span>: 0<\/span>\n      });\n      useEffect(()<\/span> =><\/span> {\n        if<\/span> (inView === true<\/span>) {\n          videoref.current.play();\n        }\n      });\n      return<\/span> (\n        <div<\/span> ref<\/span>={ref}<\/span>><\/span>\n          <VidPlayer<\/span> videoref<\/span>={videoref}<\/span> \/><\/span>\n        <\/div<\/span>><\/span><\/span>\n      );\n    };\n    export<\/span> default<\/span> VideoPlayer;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
We assigned the ref<\/code> value, destructured from the useInView<\/code> hook, to the DOM element we want to monitor. In this case, it\u2019s the div enclosing the rendered VidPlayer<\/code> component.<\/p>\n
In the VideoPlayer<\/code> component\u2019s useEffect<\/code> function, we\u2019ll play the video when in view.<\/p>\n
The videoRef<\/code> reference is created using React\u2019s useRef()<\/code> hook, and is assigned to the ref prop of video player. This ref value will be used to access the video player methods in our VideoPlayer<\/code> component. The HTML video element\u2019s .play()<\/code> method is then used to play the video when it\u2019s in view.<\/p>\n
refs<\/code> are references to objects. They can include DOM nodes or values. useRef<\/code> returns a mutable object with a .current<\/code> property set to the initial value we passed to the hook. The code below should be added to our VideoPlayer.jsx<\/code> file.<\/p>\n
Rendering the Video Player<\/h2>\n
In the site\u2019s home page, located in the src\/pages<\/code>, we\u2019ll create a new file named index.jsx<\/code>. This is the home page of the website. In this file, we\u2019ll render the VideoPlayer<\/code> component in the parent Home<\/code> component along with other page content. The code snippet below should be copied into our newly created index.jsx<\/code> file in src\/pages<\/code> directory.<\/p>\n
    import Head from \"next\/head\";\n    import styles from \"..\/styles\/Home.module.css\";\n    import VideoPlayer from \"..\/components\/VideoPlayer\/VideoPlayer\";\n    \n    const Home = () => {\n      return (\n        <div<\/span> className<\/span>={styles.container}<\/span>><\/span>\n          <Head<\/span>><\/span>\n            <title<\/span>><\/span>Video Player with Cloudinary<\/title<\/span>><\/span>\n            <link<\/span> rel<\/span>=\"icon\"<\/span> href<\/span>=\"\/favicon.ico\"<\/span> \/><\/span>\n          <\/Head<\/span>><\/span>\n          <header<\/span> className<\/span>={styles.header}<\/span>><\/span>\n            <h1<\/span>><\/span>Video Player<\/h1<\/span>><\/span>\n          <\/header<\/span>><\/span>\n          <main<\/span> className<\/span>={styles.main}<\/span>><\/span>\n            <section<\/span> className<\/span>={styles.intro}<\/span>><\/span>\n              <p<\/span>><\/span>NOW EASILY<\/p<\/span>><\/span>\n              <h1<\/span> className<\/span>={styles.title}<\/span>><\/span>\n                Render Your Videos with Cloudinary, <br<\/span> \/><\/span> And Observer Intersection\n                Library.\n              <\/h1<\/span>><\/span>\n            <\/section<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
In the code block above, we created a Home<\/code> component, with the title<\/code> and icons for our landing page. Next, we\u2019ll add content and render the VideoPlayer<\/code> component. The code block below will be added to our index.jsx<\/code> file above.<\/p>\n
            <section<\/span> className<\/span>={styles.img_wrapper}<\/span>><\/span>\n              <img<\/span> src<\/span>=\"\/assets\/video.svg\"<\/span> alt<\/span>=\"illustration\"<\/span> \/><\/span>\n            <\/section<\/span>><\/span>\n          <\/main<\/span>><\/span>\n          <section<\/span> className<\/span>={styles.description}<\/span>><\/span>\n            <p<\/span>><\/span>\n            There is no one who loves pain itself, who seeks after it, and wants to have it, simply because it is pain.\n            There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain.\n            <\/p<\/span>><\/span>\n          <\/section<\/span>><\/span>\n          <section<\/span> className<\/span>={styles.video_player}<\/span>><\/span>\n            <VideoPlayer<\/span> \/><\/span>\n          <\/section<\/span>><\/span>\n        <\/div<\/span>><\/span>\n      );\n    };\n    export default Home;\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
The home page should look like this:<\/p>\n
\"cloudinary<\/p>\n
Summary<\/h2>\n
In this article, we created a Next.js landing page and made a video player using the Cloudinary video player. We also added autoplay<\/a> when in the video is in view, using React Observer Intersection. You can improve the application by utilizing other video player events.<\/p>\n
\nAs we’ve seen, Next.js is a versatile React framework that offers a plethora of features, making it a top choice for web developers. From server-side rendering to static site generation, it provides tools that can significantly enhance the performance and SEO of your website. Furthermore, with features like hot reloading and built-in routing, development becomes a breeze. Its compatibility with TypeScript ensures that your code remains maintainable and robust. Whether you’re building a dynamic web application or a static portfolio site, Next.js has got you covered.\n<\/p>\n
Check out these other useful resources:<\/p>\n
[React.memo()](https:\/\/reactjs.org\/docs\/hooks-reference.html#usememo)<\/code> is a higher-order component (HOC) that takes a component as a prop, and returns a component, preventing a component from re-rendering if the props haven\u2019t changed. React.memo()<\/code> implements memoization<\/a> on React components, and prevents our Video player from rerendering even if its parent component rerenders.<\/p>\n
Intersection observer API<\/a> provides a way to asynchronously observe changes in the intersection of a target element with a parent element, or viewport, in the browser.<\/p>\n