In some Wechat built-in browser, <video> tag in your website always surprisingly goes fullscreen automatically, leaving document flow left below, with “related videos” suggestions at the end of your video.

As the start point for fixing, you may add those attributes to your video tag:

1
2
3
4
5
6
7
8
9

<!-- irrelevant attributes for solving this problem are omitted -->
<video
    playsinline="true"
    webkit-playsinline="true"
    x5-playsinline="true"
    x5-video-player-type="h5"
    x5-video-orientation="landscape|portrait"
    x5-video-player-fullscreen="true"
></video>

Do all versions of Wechat built-in browsers need these attributes? What do these attributes stand for?

Under the Bonnet

Wechat built-in web browser’s engine varies with operating systems and distribution channels.

• All iOS Wechat versions use Webkit;
• Google Play’s Wechat versions use Webview;
• Most Android Wechat versions in China, which is not distributed by Google Play, use X5.

X5, maintained by Tencent, forks from Google’s Blink, is part of Tencent Browsing Service(In Chinese).

Attributes Explained

x5-playsinline

It’s actually Apple’s idea to let video go fullscreen on playing. This feature does not seem to be existing in Android Webview or Chrome. However, X5’s developer decides to adopt this feature, on Android.

Developers can use attribute playsinline, along with its Apple vendor-prefixed version webkit-playsinline to disable this behavior on iOS. X5 has got its own vendor-prefixed version x5-playsinline.

Though playsinline has become part of HTML standard since 2016, you are encouraged to use its vendor-prefixed versions at the same time for better compatibility.

x5-video-player-type

x5-video-player-type has only one option, h5, lets <video> stay in document flow rather than float above everything else.

x5-video-orientation

x5-video-orientation declares supporting orientation of video, has three options:

• portrait;
• landscape;
• landscape|portrait, which follows the device orientation.

x5-video-player-fullscreen

x5-video-player-fullscreen makes video fullscreen when playing, however, it does let <video> tag stay in the document flow, brings less surprise.

This attribute give the web page the height originally taken by Wechat’s top permanent title bar. Fullscreen video has two black background up and down without this attribute, as the height of title bar is not taken by page.

Other Notes

X5 does not support playing two(or more) <video> at the same time, nor is playing video and audio(<video>+<audio>) simultaneously supported. Trying to do so makes the originally playing element paused when playing new one.

Picture-in-picture mode in Android and Chrome can be disabled by video attribute
disablePictureInPicture.

References

• X5’s official video guide(in Chinese)
• X5’s notes on video from its developers(in Chinese)