Optimized Videos in Vue with Cloudinary

DEV Community

demo' } }); const myVideo = cld.video('dog'); </script>

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)
);

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');

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);

Native HTML Video Attributes

You can also pass standard HTML attributes:

<AdvancedVideo :cldVid="myVideo" controls loop muted />

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')"
/>

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 🖥️