如何将播放按钮置于响应式视频元素的中心

Question

我正在使用 HTML5 视频元素制作视频播放器，我有一个可以启动视频的播放按钮。但是我的问题是如何让播放按钮位于视频的中央。使用位置或边距将按钮推到视频的中心将不起作用，因为当您调整 window 和播放器的大小时，播放按钮将移出位置。

我尝试过使用定位 - left/top 等，我习惯于使用相同概念的边距，但是这些不适用于响应式视频播放器，我不知道如何处理有了这个，想知道是否有人有建议。

Answer 1

您需要使用 CSS 的媒体查询来为不同设备添加不同大小的填充和边距。以下媒体查询将帮助您编码。将您的填充和边距 CSS 代码放入其中以适应不同的设备视口。

    <style>

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {  

  /* Your CSS Code for this device size */    

 }

 /* Small devices (portrait tablets and large phones, 600px and up) */
 @media only screen and (min-width: 600px) {  

   /* Your CSS Code for this device size */    

 }

 /* Medium devices (landscape tablets, 768px and up) */
 @media only screen and (min-width: 768px) {  

   /* Your CSS Code for this device size */    

 } 

 /* Large devices (laptops/desktops, 992px and up) */
 @media only screen and (min-width: 992px) {  

  /* Your CSS Code for this device size */    

 }      

 /* Extra large devices (large laptops and desktops, 1200px and up) */
 @media only screen and (min-width: 1200px) {

  /* Your CSS Code for this device size */ 

 }

 /* According to Mobile Orientation */
 @media only screen and (orientation: landscape) {   

    /* Your CSS Code for this device orientation */    

 }

</style>

Answer 2

用于居中任何东西（img、图标、文本等）

.parent_item{
   position: relative;
}
.center_item {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
}

.parent_item 是您的视频包装器 class 而 .center_item 是您播放的图标或按钮，它也是响应式的。

如何将播放按钮置于响应式视频元素的中心

How to center a play button on a responsive video element

html

javascript

css

html5-video