DEV Community

Cover image for Optimized Videos in Vue with Cloudinary
Jakub Andrzejewski
Jakub Andrzejewski

Posted on

Optimized Videos in Vue with Cloudinary

#performance #vue #typescript #javascript

Performance isn’t just about speed—it’s about user experience. Delivering videos efficiently can make your app feel snappy and polished, while poorly optimized media can slow it down and frustrate users. With Cloudinary’s AdvancedVideo component in Vue.js, you can serve optimized videos with ease, ensuring smooth playback across devices.

This guide covers practical techniques for using Cloudinary AdvancedVideo in Vue, including transformations, HTML attributes, and event handling.

Enjoy!

🤔 What Is Cloudinary AdvancedVideo?

The AdvancedVideo component from @cloudinary/vue allows you to deliver optimized videos directly to your users. It handles:

  • Transformations like resizing, cropping, or adding effects
  • Native HTML video attributes such as controls and loop
  • Video player events for interactive experiences

This gives you full control over video performance and user experience.

🟢 Optimized Videos in Vue with Cloudinary

For this tutorial, we built a simple Vue 3 + Vite + TailwindCSS app.

<template>
  <AdvancedVideo :cldVid="myVideo" controls />
</template>

<script setup>
import { AdvancedVideo } from "@cloudinary/vue";
import { Cloudinary } from "@cloudinary/url-gen";

const cld = new Cloudinary({
  cloud: { cloudName: 'demo' }
});

const myVideo = cld.video('dog');
</script>
Enter fullscreen mode Exit fullscreen mode

If you would like to see a video version of this tutorial, check out the following link.

✅ Tips:

  • Keep the video component simple for testing basic playback.
  • Later, we’ll add transformations, HTML attributes, and event handling.

Transform Videos for Better Performance

Transformations help you serve right-sized, optimized videos. Here’s how to do it:

1. Resize a Video 

import { fill } from "@cloudinary/url-gen/actions/resize";

myVideo.resize(
  fill()
    .width(350)
    .height(250)
);
Enter fullscreen mode Exit fullscreen mode

This ensures your video loads only at the dimensions you need, improving performance.

Alternative Transformation Approaches

Raw transformation string:

myVideo.addTransformation('c_thumb,g_face,h_150,w_150/r_20');
Enter fullscreen mode Exit fullscreen mode

Object-based transformation (converted to string):

import { transformationStringFromObject } from "@cloudinary/url-gen";

const transformation = transformationStringFromObject([
  { gravity: "face", height: 150, width: 150, crop: "thumb" },
  { radius: 20 }
]);

myVideo.addTransformation(transformation);
Enter fullscreen mode Exit fullscreen mode

Native HTML Video Attributes

You can also pass standard HTML attributes:

<AdvancedVideo :cldVid="myVideo" controls loop muted />
Enter fullscreen mode Exit fullscreen mode

Examples:

  • controls → show video controls
  • loop → replay automatically
  • muted → start muted for autoplay compliance

These small tweaks enhance user experience without extra JavaScript.

React to Video Player Events

AdvancedVideo lets you handle player events like play and pause:

<AdvancedVideo
  :cldVid="myVideo"
  controls
  :onPlay="() => console.log('play')"
  :onPause="() => console.log('pause')"
/>
Enter fullscreen mode Exit fullscreen mode

Best Practices

Delivering optimized videos with AdvancedVideo in Vue.js is about layered improvements:

  • Apply transformations to resize or crop videos
  • Pass native HTML attributes for better UX
  • React to video player events for interactive features

💡 Pro Tip: Check Cloudinary Vue Video Transformations and Video Manipulation & Delivery for more advanced scenarios.

With these tips, you’ll serve videos that load fast, play smoothly, and delight your users.

📖 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:

Vue School Link

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

🧪 Advance skills

A certification boosts your skills, builds credibility, and opens doors to new opportunities. Whether you're advancing your career or switching paths, it's a smart step toward success.

Check out Certificates.dev by clicking this link or by clicking the image below:

Certificates.dev Link

Invest in yourself—get certified in Vue.js, JavaScript, Nuxt, Angular, React, and more!

✅ Summary

Optimizing videos in Vue isn’t just about resizing—it's about smart delivery, responsive design, and interactivity. Layer these techniques for:

  • Fast, right-sized video delivery
  • Smooth playback across devices
  • Interactive, user-friendly media experiences
  • Take care and see you next time!

And happy coding as always 🖥️

Top comments (0)