video标签播放视频禁止脱离文档流

video 标签在微信公众号页面播放视频时，设置h5同层播放如下：
webkit-playsinline="true" /*这个属性是ios 10中设置可以让视频在小窗内播放，也就是不是全屏播放*/
x-webkit-airplay="true" /*这个属性还不知道作用*/
playsinline="true" /*IOS微信浏览器支持小窗内播放*/
x5-video-player-type="h5-page" /*启用H5播放器,是wechat安卓版特性*/
x5-video-orientation="h5" /*播放器支付的方向，landscape横屏，portraint竖屏，默认值为竖屏*/
x5-video-player-fullscreen="true" /*全屏设置，设置为 true 是防止横屏*/
当切换为全屏播放后，视频播放仍会脱离文档流。

解决办法：

//js手动设置横屏
// @param  $print {string} 页面最外层元素
changeOrientation($("#print"));
function changeOrientation( $print ){  
  var width = document.documentElement.clientWidth;
  var height =  document.documentElement.clientHeight;
  if( width < height ){
	  console.log(width + " " + height);
	  $print.width(height);
	  $print.height(width);
	  $print.css('top',  (height-width)/2 );
	  $print.css('left',  0-(height-width)/2 );
	  $print.css('transform' , 'rotate(90deg)');
	  $print.css('transform-origin' , '50% 50%');
 } else{
 	$print.width(width);
	$print.height(height);
 }
   var evt = "onorientationchange" in window ? "orientationchange" : "resize";
	window.addEventListener(evt, function() {
	    console.log(evt);
		setTimeout( function(){
			var width = document.documentElement.clientWidth;
			 var height =  document.documentElement.clientHeight;
			 if( width > height ){
				$print.width(width);
				$print.height(height);
				$print.css('top',  0 );
				$print.css('left',  0 );
				$print.css('transform' , 'none');
				$print.css('transform-origin' , '50% 50%');
			 }
			 else{
				$print.width(height);
				$print.height(width);
				$print.css('top',  (height-width)/2 );
				$print.css('left',  0-(height-width)/2 );
				$print.css('transform' , 'rotate(90deg)');
				$print.css('transform-origin' , '50% 50%');
			 }
		}  , 300 );
	}, false);
}