Question

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

谢谢。

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

Answer 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应该可以满足您的需求。

Answer 2

在css嵌入内部后添加以下行：

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

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

2 个答案: