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);
}