How To Embed YouTube Video In Next.js Website

Introduction

In the digital age, engaging your website's visitors is paramount, and multimedia content, especially video, is king. Embedding YouTube videos into Next.js websites is an innovative way to captivate your audience, enhance user experience, and leverage the robust features of a leading web development framework. This guide explores the seamless integration of YouTube videos into Next.js projects, promising to enrich your site with dynamic content that users love.

Why embed YouTube videos in Next.js website

Embedding YouTube videos brings your website alive, transforming static pages into vibrant spaces of engagement. Videos can dramatically increase the time visitors spend on your site, directly influencing your SEO ranking positively. With Next.js, incorporating video content not only enhances user experience but also leverages Next.js’s server-side rendering capabilities for faster load times, ensuring your SEO doesn't take a hit from rich media content.

How to embed YouTube videos in Next.js website

Embedding YouTube videos in your Next.js project can be achieved in two main ways: using the traditional method or the @next/third-parties package for a more optimized approach.

Option 1: Using @next/third-parties

@next/third-parties is the official library provided by Next.js. This library is a collection of components and utilities for loading popular third-party libraries in Next.js applications, including YouTube videos, Google Tag Manager, Google Analytics, Google Map, etc.

In @next/third-parties, the component YouTubeEmbed is for embedding Youtube videos.

Installation:

npm install @next/third-parties
# or
pnpm install @next/third-parties

Here is an example code snippet:

<div>
    <YouTubeEmbed videoid="1FLYZdxsteo" height={400} width={720} />
</div>

How it will look like:

Pros: By leveraging lite-youtube-embed under the hood, this method not only simplifies the embedding process but also automatically optimizes the loading of YouTube videos, ensuring the website performance remains top-notch.

Cons: This method adds a few additional layers of dependency to your project.

Option 2: Embedding with iframe

This option is the basic embedding method. You can copy the ifram embed code provided by YouTube and insert into your Next.js page, you can also adjust the width and height of the video along with a few other attributes to fit your design needs.

Example code snippet (with Tailwind CSS):

<iframe
    className="w-full aspect-video self-stretch md:min-h-96"
    src="https://www.youtube.com/embed/1FLYZdxsteo"
    frameBorder="0"
    title="Product Overview Video"
    aria-hidden="true"
/>

How it will look like:

Pros: The iframe method offers straightforward implementation and customization flexibility, allowing direct control over the video's appearance and behavior on your website.

Cons: It can lead to performance issues, such as increased page load times, and lacks automatic optimization features for responsiveness and lazy loading, requiring manual adjustments.

Which option did I choose?

I chose Option 2 for the page my partner and I worked on. Why? Other than the pros/cons mentioned above, another consideration is the user bahavior before and after watching the video. With Option 2, the user will be able to subscribe to be channel with their existing identity in the browser.

Conclusion

Integrating YouTube videos into Next.js websites is a powerful strategy to boost user engagement and bring your content strategy to life. Whether you opt for the direct control of iframe embedding or the optimized ease of the @next/third-parties library, your website will gain significantly from the dynamic, engaging nature of video content.

Any thought? Please feel free to shoot me a email at garylu@pacebits.com