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
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).
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
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 has only one option,
<video> stay in document flow rather than float above everything else.
x5-video-orientation declares supporting orientation of video, has three options:
landscape|portrait, which follows the device orientation.
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.
X5 does not support playing two(or more)
<video> at the same time, nor is playing video and audio(
<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