Optimized Videos in Nuxt with Cloudinary

I was always struggling with delivering video elements to my websites as there is actually a lot of things that needs to be implemented in the video player to give users flexibility in what they want to do with it.

For example, if we insect video player such as YouTube, you will see that there is a support for things like chapters, subtitles, picture in picture, and many more.

So, when I found out that you can use Cloudinary to have such advanced video player embedded on your website, I instantly wanted to try it out. And oh boy, it works really really well!

In this article, I will introduce you to my favourite feature of Cloudinary -> The Video Player!

Enjoy!

🟢 Using Cloudinary Video Player in Nuxt

The most basic example of video player can be achieved by using the code below in your Nuxt app:

<CldVideoPlayer
  width="1920"
  height="1080"
  src="<Public ID>"
/>

We just need to pass the width and height of the video player as well as the video src. No more configuration options needed to achieve that! And as a result, we get following video player in our website

As I mentioned about, we can pass some configuration options like colors which will allow us to customize the video player to have a look and feel that will be more in line with our brand colors for example and we can achieve it like following:

<script setup lang="ts">
  const colors = {
    accent: "#ff0000",
    base: "#00ff00",
    text: "#0000ff",
  };
</script>

<template>
  <CldVideoPlayer
    width="1620"
    height="1080"
    src="videos/mountain-stars"
    :colors="colors"
    fontFace="Source Serif Pro"
  />
</template>

And the result of above code would look like this:

Finally, what would be a good YT video with a solid chapters section where we could easily see that certain chapter is about the information that we wanted to find. Let's add following code to enable chapters for the video player.

<script setup lang="ts">
  const chapters = {
    0: "Chapter 1",
    6: "Chapter 2",
    9: "Chapter 3",
  };
</script>

<template>
  <CldVideoPlayer
    width="600"
    height="600"
    src="<Cloudinary URL>"
    :chapters="chapters"
    chaptersButton
  />
</template>

And as a result, we get following video player with chapters:

If you would like to learn more about this feature, check out the documentation here

📖 Learn more

If you would like to learn more about Vue, Nuxt, JavaScript or other useful technologies, checkout VueSchool by clicking this link or by clicking the image below:

It covers most important concepts while building modern Vue or Nuxt applications that can help you in your daily work or side projects 😉

✅ Summary

Well done! You have just learned how to deliver performant videos in Nuxt with Cloudinary.

Take care and see you next time!

And happy coding as always 🖥️