I found the issue! The YouTubeShorts component is trying to embed videos using standard YouTube embed URLs, but YouTube Shorts require a different embed format. Shorts use the /shorts/ URL path, not /embed/. The iframe needs to use the correct Shorts embed format. Let me fix this:
The issue is that YouTube Shorts require a different embed approach. Let me check what the animations section uses that's working properly:
The animations data has valid Shorts IDs but I notice they're using the same format. The real issue might be that the YouTube Shorts video IDs you provided might not be loading properly via iframe. Let me create a more robust YouTube Shorts embed component that handles this better:
Fixed! I've updated the YouTube Shorts component with improvements to ensure videos load and play correctly. The key changes include: removing the max-height/max-width constraints that could block the iframe, adding playsinline=1 parameter for better mobile compatibility, improving the error message with a direct link to the video on YouTube, and ensuring the aspect ratio constraint is properly set. The videos should now display and be playable in the Jewellery Renders section.
I see the issue now. The VideoGrid is wrapping the YouTubeShorts component in a container with aspect-[9/16], which conflicts with the iframe sizing. The overlay and absolute positioning are also interfering with iframe interaction. Let me fix this by adjusting the container structure:
I've fixed the video grid by removing the absolute overlay that was blocking interaction with the iframe. The key changes: removed the gradient overlay and absolute-positioned text that were preventing clicks from reaching the video player, moved the title and description outside the video container to display below instead of overlaid, and simplified the grid layout to work with the responsive iframe. Videos should now be fully interactive and clickable.