如何删除 Video.js 中的大播放按钮阴影？答案

【问题标题】：How to remove big play button shadow in Video.js?如何删除 Video.js 中的大播放按钮阴影？
【发布时间】：2015-05-17 21:16:23
【问题描述】：

我正在寻求有关如何删除 video.js 中三角形播放按钮中的小阴影的帮助。我尝试过使用元素“.vjs-big-play-button”和 box-shadow/text-shadow 的 CSS。但是 box-shadow 只会改变整个播放按钮的阴影，而 text-shadow 并没有改变任何东西。

谢谢。

我上传了一张图片，以准确显示我要移除的阴影： http://i.stack.imgur.com/Cr0fh.png

【问题讨论】：

标签： css html5-video video.js

【解决方案1】：

要得到这个，你所要做的就是编辑渲染播放图标的类。在 css 文件中是这样的：

.vjs-default-skin .vjs-big-play-button:before {
  content: @play-icon;
  font-family: VideoJS;
  /* In order to center the play icon vertically we need to set the line height
     to the same as the button height */
  line-height: @big-play-height;
  text-shadow: 0.05em 0.05em 0.1em #000;
  text-align: center /* Needed for IE8 */;

  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
}

删除 text-shadow 应该可以得到你想要的东西。

【讨论】：

【解决方案2】：

在 css 嵌入后添加这行：

<style>.vjs-default-skin:hover .vjs-big-play-button, .vjs-default-skin .vjs-big-play-button:focus {box-shadow: none;}</style>

【讨论】：