CldVideoPlayer not initialized when navigating to a page via the client router (view transitions)

[jhb-dev]

Bug Report

When using view transitions, the CldVideoPlayer is only initialized when performing a full page refresh, but not when navigating to a page via the ClientRouter. This leads to the issue that the player is not visible and the video cannot be viewed.

Steps To Reproduce the error

1. Create two pages (A and B) which both use the CldVideoPlayer and add links from one page to another
2. Activate view transitions by adding the <ClientRouter /> to the head (see docs)
3. Open page A, the player is initialized and the video can be played
4. Navigate to page B, the player is not itialized and therefore the video cannot be played.

Expected behaviour

The video player should be initialized also when navigating to a page via the client router.

Your environment

Packages:

• astro: 5.4.2
• astro-cloudinary: 1.3.0

Other:

• OS: Windows 11
• Node version: 22
• Npm version: 10.9.2
• Browser name and version: Chrome,

[kovapatrik]

I have exactly the same issues! The only workaround I have is to disable the client router for routes where I have videos by using the data-astro-reload attribute on the a tags.

[jhb-dev]

I have just created a PR which resolves this problem: #99

The solution is to add the event listener to astro:page-load.

[kovapatrik]

ah cool, I was going to do the same today, thank you!

but maybe you need to have the load event as well, I think both events should trigger that function

[jhb-dev]

@kovapatrik you're right, the astro:page-load event is only fired when the <ClientRouter /> is used in the application. I'll adjust my PR accordingly to ensure it works in both setups!