In globalized B2B trade, video is a crucial medium for overcoming language barriers and building customer trust. The SX-Creval video module aims to solve performance bottlenecks such as "code redundancy and slowing down web pages" that occur when embedding video in traditional website building systems.
We offer three industrial-grade video presentation formats, allowing you to showcase product details, workshop capabilities, or complete production processes with a smooth, fast-loading, and fully adaptive experience, professionally presenting your product to global buyers.
Module advantages
Before introducing the specific display formats, let's first outline the underlying technical design of the SX-Creval video engine. It is this technical architecture that ensures your international trade website has a significant advantage in Google performance tests and user experience:
1. Intelligent link parsing
- Business Experience: Operators simply need to paste YouTube, Vimeo links, or MP4 direct links into the backend, and the system will automatically adapt to different platforms and remove third-party ad recommendations. Chinese websites can use Bilibili, Youku, or Tencent.
- Technical architecture: The underlying built-in regular expression cleaning engine automatically injects cross-domain policies and non-tracking parameters, effectively avoiding browser's strict autoplay blocking and cross-domain error issues.
2. High-performance on-demand loading
- Business experience: No matter how many videos are configured on a single page, the page loading speed remains highly efficient.
- Technical Architecture: The system abandons the traditional method of directly embedding an iframe. Initially, it only loads a smartly cropped, extremely small cover image (WebP format); only when a visitor clicks "play" will the system seamlessly inject the player's DOM within milliseconds. This design ensures the page passes Google Core Web Vitals performance tests smoothly.
3. Immersive, anti-penetration interaction
- User experience: When using pop-up playback, the background will automatically apply a blur effect and lock the background page to prevent scrolling through, providing a smooth experience like a native application.
- Technical architecture: The player is directly mounted to the top-level HTML structure, effectively solving the common z-index layer occlusion and CSS truncation problems in traditional web pages.
Module use cases
Scenario 1: Single Card Video Display
- Applicable scenarios: Homepage display of core products, official corporate promotional videos, and high-conversion landing pages.
- Function and configuration description:
- Intelligent dual-mode playback:
- Pop-up mode (default): After clicking play, the background automatically darkens to a frosted glass effect, and a full-screen player pops up, providing an immersive viewing experience.
- In-place Embedded Mode: Uncheck "Pop-up?" and the video will seamlessly replace the cover and start playing in the original section, maintaining the continuity of the visitor's scrolling.
- Image and text layout and conversion guidance: Supports flexible layout (e.g., video on the left/top, text on the right/bottom). Configurable descriptions of key selling points, and supports the free attachment of call-to-action (CTA) buttons such as "Contact Us" and "Download Catalog".
- Custom animation effects: Supports configuration of various scrolling entrance animations. When a visitor browses to this section, the card will be displayed smoothly.
- Intelligent dual-mode playback:
Scenario 2: Media Grid Gallery
- Applicable scenarios: Real-life displays of multiple workshops in a factory, close-up details of products from multiple angles, and exhibition reviews. Supports seamless mixing of pure images, pure videos, or text and video.
- Function and configuration description:
- Panoramic Media Convergence:
- Image Display: If only images are uploaded, the system will generate an image gallery with micro-interactions. Visitors can click to open a high-resolution image gallery (Lightbox).
- Video input: If you enter a video link in the image configuration, a "play" icon with a breathing light effect will be automatically generated on the cover. Click it to play.
- Flexible UI engine: The backend supports one-click switching of grid layouts (2 columns, 3 columns, 4 columns) and can force a uniform card ratio (e.g., 1:1, 16:9). The system will automatically perform lossless cropping of images on the backend to ensure a neat and uniform display on the front end, without being limited by the original uploaded size.
- Seamless client-side loading: Supports paginated, on-demand display (e.g., 4 out of a total of 20 product videos). When a visitor clicks "Load More," subsequent content will be smoothly presented under the pure client-side engine, without the need to refresh the page, effectively reducing the bounce rate.
- Panoramic Media Convergence:
Scenario 3: Master Playlist
- Applicable scenarios: operation guides for a series of products, step-by-step explanations of complex production processes, and collections of customer testimonial cases.
- Function and configuration description:
- Multi-window data linkage: The layout features a scrolling video list on the right and a main player on the left. When a visitor clicks on any video on the right, the main player, title, and description text on the left will switch synchronously in milliseconds, without requiring page refreshes, providing a smooth, streaming-level viewing experience.
- Adaptive Light/Dark Mode: Offers a "Background Inversion" switch. When enabled, component modules will automatically switch to a dark glass-like texture, with text automatically highlighted and the visual effects adaptively adjusted. This mode is ideal for showcasing the technological feel of high-end precision manufacturing.
- Micro-interaction details: The playlist on the right supports displaying duration indicators (e.g., 03:45), and the currently playing video is automatically highlighted. Additionally, the system features a custom-designed ultra-thin scrollbar for long lists, ensuring a consistent brand visual style across various browsers.