如何从 <video> 标签中删除边框？答案

【问题标题】：How can I remove border from <video> tag?如何从 <video> 标签中删除边框？
【发布时间】：2023-09-12 08:39:01
【问题描述】：

我的网站上有一个视频，桌面上的一切看起来都很好。但是，在 iPhone 上（我使用的是 Chrome）有一个边框。我已经尝试了here 发布的解决方案，但到目前为止都没有奏效（我使用的是 Bootstrap 4）。

我的代码：

video {
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -webkit-appearance: none
}

.medio-pago-img-container,
.national-video {
  border: none;
  outline: none !important;
  box-shadow: none;
}

<div class="col-lg-6 col-md-12 col-sm-12 col-xs-12 col-12 medio-pago-img-container text-center">
  <video src="images/phone-national.mp4" class="national-video" id="nationalVideo" type="video/mp4" width="464" height="500" muted autoplay loop playsinline>Your browser does not support the video tag</video>
</div>

我尝试截取我的 iPhone 屏幕截图，但截图中没有显示边框，所以我拍了一张我的手机的照片。

【问题讨论】：

我不太确定，但我认为我们对此没有太多控制权
在 css 中，您可以try outline:unset - 特别是 Chrome 有时是解决方案。

标签： html css

【解决方案1】：

上面@cssyphus 给出的答案有效。我加了outline: unset;，边框就没有了。

【讨论】：