首页设置移动端视频全屏居中

设置移动端视频全屏居中

时间: 2023-10-05 12:08:30 浏览: 185

1. 使用CSS设置视频元素的宽度和高度为100%。 ```css video { width: 100%; height: 100%; } ``` 2. 使用JavaScript获取屏幕宽度和高度。 ```javascript var screenWidth = window.innerWidth; var screenHeight = window.innerHeight; ``` 3. 通过JavaScript设置视频元素在屏幕中居中显示。 ```javascript var video = document.getElementById('video'); video.style.position = 'absolute'; video.style.left = (screenWidth - video.offsetWidth) / 2 + 'px'; video.style.top = (screenHeight - video.offsetHeight) / 2 + 'px'; ``` 完整代码： ```html <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> video { width: 100%; height: 100%; } </style> </head> <body> <video id="video" controls> <source src="video.mp4" type="video/mp4"> </video> <script> var screenWidth = window.innerWidth; var screenHeight = window.innerHeight; var video = document.getElementById('video'); video.style.position = 'absolute'; video.style.left = (screenWidth - video.offsetWidth) / 2 + 'px'; video.style.top = (screenHeight - video.offsetHeight) / 2 + 'px'; </script> </body> </html> ```

阅读全文