# 如何让 HTML5 的 Video 标签中的 poster 占满整个区域？

- Link: https://www.ixiqin.com/2017/09/06/400-bad-request400-bad-requestnginx/
- Published: 2017-09-06T06:24:27+08:00
- Author: 白宦成

在帮导师上传视频时，遇见了一个问题
 为了让页面不那么空白，在放置 Video 标签时，我
添加了 Poster 属性，从而使视频未播放时，可以正常的显示一张图片。一方面可以保持原有
的体验不变（这里之前就是一张图片）。 但是当我真正放好了以后，发现一个问题，就是 
Poster 无法完整的覆盖整个区域，大概就是填满我下方截图中所圈出的区域。两侧会有留白。
而我的 CSS 是有边框的，所以会非常的丑。 一开始，我认为是 Poster 的比例问题，但是
在我按照播放器的比例来切割 poster 尝试多次无果之后，我觉得问题不是出在这里。  问题
出在哪里我目前还不清楚，无空深究，这里只把解决方案贴出，具体的原因待以后有空再来
深究。

## 可行方案

当前的方案是采用的 `background` 来实现的。
 首先，删除 `video` 标签的 `poster` 属性，
然后将其 `preload` 属性设置为 `none`, 接下来，添加 CSS 代码

    ```css
     video {
       background: transparent url('video-image.jpg') 50% 50% / cover no-repeat ;
     }
    ```

实现后的效果如下
  跳变的原因不明，后续研究。 [title]Todo[/title]

 1. 搞清楚为何 Poster 没有占满
 2. 搞清楚为何出现跳变

[title]拓展阅读[/title]
 https://stackoverflow.com/questions/10826784/make-html5-
video-poster-be-same-size-as-video-itself