技术求助：如何为Video Poster添加黑色边框

问题原因分析 #

你的代码存在两个核心问题导致边框不生效：

1. 样式优先级冲突：video标签本身写了内联样式border: 1px solid #ddd，内联样式的优先级高于外部CSS的属性选择器video[poster]，黑色边框被直接覆盖。
2. 若海报比例与video设置的宽高不一致，直接给video加边框会出现边框与海报之间的空白区域，视觉上达不到“给海报加边框”的效果。

可行解决方法 #

方法1：调整样式优先级，让黑色边框生效

• 方案A：移除内联border样式（推荐）
  修改后的PHP代码：

echo '<video id="video" width="300px" height="200px" controls poster="'.$image.'" style="padding: 5px 10px; border-radius: 4px;"><source src="'.$video.'" preload="metadata"></video>';

CSS保持不变：

video[poster]{
  border:1px solid #000000;
}

• 方案B：提升CSS选择器优先级（需保留内联样式时）
  用ID选择器+属性选择器强化优先级，必要时用!important强制覆盖：

#video[poster]{
  border:1px solid #000000 !important;
}

方法2：用容器包裹，让边框精准贴合海报（解决比例适配问题）

如果海报比例与video宽高不匹配，用容器包裹video，给容器加边框，同时让海报填满容器：

echo '<div class="video-container" style="width:300px; height:200px; border:1px solid #000; border-radius:4px; overflow:hidden;">
        <video id="video" width="100%" height="100%" controls poster="'.$image.'" style="object-fit: cover;">
          <source src="'.$video.'" preload="metadata">
        </video>
      </div>';

• object-fit: cover：让海报按比例裁剪填满容器，无拉伸无空白；若要完整显示海报，可改用object-fit: contain。

内容的提问来源于stack exchange，提问作者tropiciel