Issues Embedding CapCut Video Previews on My Grav CMS Website

Support
1

Hi everyone,

I run a website dedicated to CapCut templates, tutorials, and resources, which is built on Grav CMS. I’m trying to embed CapCut video previews on my template pages, but I’m running into several issues with video playback and integration.

Problems I’m Facing:

  1. CapCut Video Previews Not Loading in Modular Pages
  • I’ve added MP4 and WebM preview files to my Grav website and tried embedding them in modular pages using Markdown and Twig, but sometimes the videos don’t load or display a broken thumbnail. Is there a preferred way to embed self-hosted videos in Grav?
  1. YouTube and CapCut Links Not Embedding Properly
  • Some CapCut creators upload previews to YouTube, and I want to embed these videos using Grav’s built-in video embed features. However, some YouTube links don’t render correctly in Twig templates. Are there any best practices for dynamically embedding YouTube videos in Grav?
  1. Slow Video Loading Performance
  • My self-hosted video previews take a long time to load, especially on mobile devices. I’ve tried enabling caching and compressing videos, but load times are still slow. Would integrating a CDN (like Cloudflare or BunnyCDN) help with performance in Grav?
  1. Autoplay and Loop Not Working in Some Browsers
  • I’ve added autoplay loop muted playsinline attributes in my Twig templates for video previews, but some browsers (especially Safari) still require user interaction to play the video. Is there a workaround for this in Grav?

What I’ve Tried:

  • Converted videos to different formats (MP4, WebM) but still face playback issues.
  • Used Grav’s built-in media embedding but found it inconsistent.
  • Enabled lazy loading for videos, but loading performance is still slow.
  • Tried using iframes for YouTube embeds, but some links don’t render properly.

Has anyone successfully embedded and optimized CapCut video previews in Grav CMS? Any tips on improving video playback, performance, or compatibility?

Thanks in advance!

2

You can check the source code of my Swiper-JS plugin. It has both YouTube and local video implementation. I didn’t notice any of the issues you describe. Also check “Known Issues” in the description - there’s a note about looping

3

Thanks for the response! I’ll definitely check out your Swiper-JS plugin for reference. Could you share a direct link to the plugin or its repository?

Also, regarding local video implementation, do you have any specific recommendations for ensuring consistent playback across modular pages? I’ve tried embedding videos using both Markdown and Twig, but sometimes thumbnails break, or the videos fail to load.

For YouTube embeds, have you encountered issues with certain links not rendering properly in Twig templates? I’m wondering if there’s a best practice for dynamically embedding YouTube videos without inconsistencies.

Appreciate your help!

4

It’s linked in my post. And one of the issues I couldn’t solve:

  • If looping is enabled, sometimes Youtube videos appear only if slide is moved a bit (not always though)

Don’t know if it’s because of the swiper or maybe swiper actually helps to render when it’s touched :thinking: Otherwise I don’t recall if I had some major issues. It’s been a while :smiley: