Astro Video Optimization | Astro Lounge | Page 1

clear obsidian Jun 2, 2025, 1:17 AM

What are the best practices to load video files into our webpages with Astro?

weary cipherBOT Jun 2, 2025, 1:17 AM

Hi @clear obsidian. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

To load video files into your webpages with Astro, the knowledge sources recommend the following best practices:

Use Cloudinary for Video Optimization
Astro supports integration with Cloudinary, a platform that provides optimized video delivery and transformation. You can use the <CldVideoPlayer> component from the astro-cloudinary package to embed and optimize videos. This component automatically optimizes and embeds your video using the Cloudinary Video Player.

Example usage:
```
--- 
import { CldVideoPlayer } from 'astro-cloudinary';
---
<CldVideoPlayer src="<Public ID>" width="<Width>" height="<Height>" />
```
This approach leverages Cloudinary’s CDN and transformation API for efficient video delivery and playback. For more details, see the Cloudinary & Astro guide.
Persist Video State Across Navigations
If you want a video to continue playing across page navigations (for example, when using Astro’s view transitions), you can use the transition:persist directive on your <video> element. This ensures the video element is not replaced during navigation, maintaining its playback state.

Example usage:
```
<video controls muted autoplay transition:persist>
  <source src="<https://example.com/video.mp4"> type="video/mp4" />
</video>
```
This is especially useful for seamless user experiences in single-page applications or sites with animated transitions. More details are available in the View Transitions guide.

Be Mindful of Power Consumption
Embedding video content can increase the power usage of your site, especially on mobile devices. To minimize environmental impact and improve performance, consider loading videos only on user interaction (e.g., after a click) rather than automatically. Packages like astro-embed can help with lazy-loading video embeds. For more eco-friendly tips, see the Starlight environmental impact guide.

Summary:

Use Cloudinary’s <CldVideoPlayer> for optimized video delivery.
Use transition:persist to maintain video state across navigations.
Consider lazy-loading videos to reduce power consumption and improve performance.

If you need more advanced video workflows or signed uploads, refer to the Cloudinary Astro SDK documentation for further examples and configuration options.