How Baidu App Achieves Immersive Video Playback on Mobile Screens

Introduction

Immersive experience means users focus on the current goal, fully engaged and losing sense of time. Applied to UI, it emphasizes content focus and reduces unnecessary distractions. This study explores video‑centric design for Baidu App, aiming to deliver a more immersive video‑watching experience on varied phone screens.

Key Design Principles

Maximize video viewport – Reduce page whitespace by expanding the video area, keeping users’ attention on the video.

Optimal viewing position – Position video slightly above the screen center, avoid overlapping status bars and navigation bars, and keep the layout clean.

Continuous viewing experience – Preserve video playback when users interact with comments or temporarily exit the player, ensuring seamless operation.

1. Maximize Video Viewport

1.1 Video Cropping

With diverse phone screen sizes and over 220,000 video aspect ratios, a flexible cropping rule is needed. The goal is to make uncontrolled video resources and devices produce a controllable visual effect, maximizing the video area while minimizing environmental interference.

Video width fills the screen, then four height categories are defined:

1) Video height > screen height – Center the video and crop excess vertically; do not allow height to fill the screen to avoid black bars.

2) Video height = screen height – Video fills the screen without cropping.

3) 1:1 < video height < screen height – Combine cropping area limits with placement rules, using cloud‑controlled parameters to ensure consistent, customizable display.

4) Landscape video (aspect ratio ≤ 1:1) – Slightly enlarge the view to improve clarity while keeping content readable.

Text Recognition Enhancement

To avoid cropping important on‑screen text, Baidu leverages AI‑powered text recognition. Safe margins are set; if text exceeds the screen, the cropping rule steps back to preserve readability.

2. Optimal Viewing Position

Placing the video slightly above the visual center aligns with natural eye focus, reduces obstruction from titles or bars, and improves immersion.

Vertical videos (height > 1:1) are laid out to avoid status and navigation bars, while landscape videos are displayed proportionally higher on the screen.

3. Continuous Viewing Experience

3.1 Window Squeezing

When users open a comment panel, a “window squeeze” keeps the video visible by shrinking the panel rather than covering the video, preserving immersion.

3.2 Floating Mini‑Window

A floating mini‑window allows video playback to continue in a small corner while users perform other actions, maintaining control and satisfaction.

Conclusion

Immersive design reduces visual interference, enlarges the viewing area, and ensures stable, controllable video presentation across diverse screen sizes. Combined with window squeezing and floating mini‑window interactions, Baidu App delivers a seamless, focused video experience that can adapt to future device variations.