Responsive Ratio

Creating responsive videos ensures that your content looks great on any device, providing an optimal viewing experience whether your audience is on a desktop or mobile. As a designer, you can achieve this by developing two sets of scenes for your video: one in a vertical format for mobile viewers and another in a horizontal format for desktop viewers.

Here's a simplified guide on how to make your videos responsive:

1. Create Parallel Scenes: Develop two versions of each scene in your video:

   • Horizontal Scenes: For desktop viewers, create scenes in a landscape format.

   • Vertical Scenes: For mobile viewers, design scenes in a portrait format.

2. Automatic Scene Selection: Utilize a snippet of code that automatically chooses the correct scene format based on the viewer's device orientation. This code works behind the scenes and doesn't require you to understand or modify it deeply. Here's a basic outline of what the code does:

   • It checks if the viewer is using a mobile device based on the screen orientation.

   • If the device is vertical (common in mobile devices), the video will switch to your pre-designed vertical scenes.

   • If the screen is horizontal, the video will play the horizontal scenes meant for desktop viewing.

   let scenes = ["intro-horizontal", "products-horizontal", "outro-horizontal"]; // Replace with your horizontal scene names
   
   if (window.innerHeight > window.innerWidth) {
       // The screen is vertical, likely a mobile device
       scenes = ["intro-vertical", "products-vertical", "outro-vertical"]; // Replace with your vertical scene names
   }
   
   BlingsPlayer.create({
     project: { ... },
     scenes,
     // Additional configuration...
   });
   

3. Implementing the Code: You don't need to write the code yourself. Just know that there's a snippet that can be easily integrated into your video's HTML page to make this magic happen. This code ensures that your audience gets the right version of your video, matching their device's orientation.

4. Testing Your Video: Once the video is set up with this responsive design feature, it's important to test it on different devices. Check how your video appears on both desktop and mobile to ensure that the scenes switch correctly and the viewing experience is seamless.

5. Blings Platform Features: If you're using the Blings platform, you have additional tools at your disposal. For instance, you can host your video as a full-screen landing page, creating an immersive experience for viewers. The platform provides straightforward options to configure this, even if you're not familiar with coding.

By following these steps, you can create engaging and responsive videos without needing to dive deep into code. This approach ensures that your content is versatile and adaptive, providing a high-quality viewing experience for all viewers, regardless of their device.