移动端自适应图片如何贴合视频实现动态封面效果

移动端自适应图片如何贴合视频实现动态封面效果

主要利用移动端图片设宽100%的 对应宽高比用50%减去图片比例高度的一半实现 垂直居中
贴合视频播放器
代码见图片下方

.poster{
      width: 100%;
      height: 0;
      padding-top: 56.25%;
      background-image: url("../static/pc/pinpai/videoCover.png");
      background-repeat: no-repeat;
      background-size: contain;
      position: absolute;
      top: calc(50% - 27.34vw);
      left: 0;
    }