如何使弹出视频始终在屏幕的中心，即使使用了全屏控制按钮使用jquery移动？

Question

我想做一个应用程序，将播放一些视频。我使用phonegap桌面与jquery移动和phonegap开发应用程序。我想用弹出窗口播放一段视频。我使用数据位置窗口，使弹出位置在屏幕的中心。问题是：

1. 当我在应用程序中运行我的文件时，有时弹出窗口会完美地显示在中间，但有时它会显示在右侧。就像这样

​

​

1. 当我按下视频上的全屏按钮控制，然后再按该按钮以最小化视频，它会使弹出视频移动到屏幕的右角。就像这样

​

​

请帮助我如何使弹出视频始终在中心，即使我使用全屏模式或后使用全屏模式。

​

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
    <link rel="stylesheet" href="jquery.mobile-1.4.5.min.css">
	<script src="jquery-1.11.3.min.js"></script>
	<script src="jquery.mobile-1.4.5.min.js"></script>
 <title>Hello World</title>	
</head>
<body>
	<div data-role="header"></div>
	<div data-role="main" class="ui-content">
		<a href="#popupBasic" data-rel="popup" class="ui-btn ui-shadow ui-corner-all ui-icon-video  ui-btn-icon-top">play</a>
			<div data-role="popup" id="popupBasic" data-position-to="window" >
				<video width="block" height="auto"   id="video_mute" controls>
					<source src="bilangan/bilangan_1.mp4" type="video/mp4">
				</video>	
			</div>
	</div>

​

Answer 1

我已经解决了我的问题。我使用了这个代码：

​

style="position: fixed; left: 50%; top: 50%; transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);"

​