Rasta 3D Video Carousel
A custom 3D Coverflow video carousel widget for Elementor.
by Adelola Kayode Samson · github.com/xarmzon/rasta-video-carousel · website
Install
No release zip yet. The repository archive installs, but the folder name will carry the branch suffix and updates will not flow:
wp plugin install https://github.com/xarmzon/rasta-video-carousel/archive/refs/heads/main.zip🎬 Rasta Video Carousel (Elementor Widget)
A production-ready WordPress plugin that adds a modern video carousel to Elementor using Swiper.js (built into Elementor).
Supports YouTube videos (all formats) with a smooth coverflow effect, lazy loading, and click-to-play interaction.
🚀 Features
- ✅ Elementor widget integration
- ✅ Uses Elementor’s built-in Swiper (no extra library)
- ✅ Coverflow (3D-style) carousel effect
- ✅ Center-focused active slide
- ✅ Click-to-play (no iframe until needed)
- ✅ Lazy loading for performance
- ✅ Auto YouTube thumbnail extraction
- ✅ Supports all YouTube formats:
- watch URLs
- youtu.be links
- embed links
- shorts links
📁 Plugin Structure
rasta-video-carousel/ │ ├── rasta-video-carousel.php ├── widget.php └── assets/ ├── js/ │ └── script.js └── css/ └── style.css
⚙️ Installation
- Download the plugin ZIP
- Go to WordPress Admin → Plugins → Add New
- Click Upload Plugin
- Upload the ZIP file
- Activate the plugin
🧩 Usage
- Open a page with Elementor
- Search for:
Rasta Video Carousel - Drag and drop the widget
- Add your video links (YouTube supported)
🔗 Supported Video Formats
The plugin automatically extracts video IDs from:
https://www.youtube.com/watch?v=VIDEO_ID
https://youtu.be/VIDEO_ID
https://www.youtube.com/embed/VIDEO_ID
https://www.youtube.com/shorts/VIDEO_ID
https://m.youtube.com/watch?v=VIDEO_ID
⚡ Performance Optimization
- Videos are not loaded initially
- Only thumbnails are rendered
- Iframe loads on click
This ensures:
- Faster page load
- Better Core Web Vitals
- Improved mobile performance
🎨 Customization
- You can modify styles in:
assets/css/style.css - And behavior in:
assets/js/script.js
🛠 Developer Notes
- Built for Elementor frontend lifecycle
- Uses
elementorFrontend.hooks - Swiper is loaded from Elementor core (
swiperhandle) - Safe output using
esc_urlandesc_attr
👤 Author
Adelola Kayode Samson
GitHub: https://github.com/xarmzon
📄 License
This project is open-source and free to use.
⭐ Support
If you like this plugin, consider:
- Starring the repo
- Sharing it
- Contributing improvements