How to remove the oval background?

HTML & CSS
1

I’d like to remove the grey oval background and keep the play button, but I can’t tell where to do this in the code below. Any help will be appreciated. Here’s the code:

.vjs-default-skin .vjs-big-play-button {
	  left: 0em;
	  top: 10.5em;
	  font-size: 3em;
	  display: block;
	  z-index: 2;
	  position: absolute;
	  width: 4em;
	  height: 2.6em;
	  text-align: center;
	  vertical-align: middle;
	  cursor: pointer;
	  opacity: 1;
	  /* Need a slightly gray bg so it can be seen on black backgrounds */
	  /* background-color-with-alpha */
	  background-color: #07141e;
	  background-color: rgba(7, 20, 30, 0.7);
	  border: 0.1em solid #3b4249;
	  /* border-radius */
	  -webkit-border-radius: 0.8em;
	  -moz-border-radius: 0.8em;
	  border-radius: 0.8em;
	  /* box-shadow */
	  -webkit-box-shadow: 0px 0px 1em rgba(255, 255, 255, 0.25);
	  -moz-box-shadow: 0px 0px 1em rgba(255, 255, 255, 0.25);
	  box-shadow: 0px 0px 1em rgba(255, 255, 255, 0.25);
	  /* transition */
	  -webkit-transition: all 0.4s;
	  -moz-transition: all 0.4s;
	  -o-transition: all 0.4s;
	  transition: all 0.4s;
	}
	/* Optionally center */
	.vjs-default-skin.vjs-big-play-centered .vjs-big-play-button {
	  /* Center it horizontally */
	  left: 50%;
	  margin-left: -2.1em;
	  /* Center it vertically */
	  top: 50%;
	  margin-top: -1.4000000000000001em;
	}
	/* Hide if controls are disabled */
	.vjs-default-skin.vjs-controls-disabled .vjs-big-play-button {
	  display: none;
	}
	/* Hide when video starts playing */
	.vjs-default-skin.vjs-has-started .vjs-big-play-button {
	  display: none;
	}
	/* Hide on mobile devices. Remove when we stop using native controls
	    by default on mobile  */
	.vjs-default-skin.vjs-using-native-controls .vjs-big-play-button {
	  display: none;
	}
	.vjs-default-skin:hover .vjs-big-play-button,
	.vjs-default-skin .vjs-big-play-button:focus {
	  outline: 0;
	  border-color: #fff;
	  /* IE8 needs a non-glow hover state */
	  background-color: #505050;
	  background-color: rgba(50, 50, 50, 0.75);
	  /* box-shadow */
	  -webkit-box-shadow: 0 0 3em #ffffff;
	  -moz-box-shadow: 0 0 3em #ffffff;
	  box-shadow: 0 0 3em #ffffff;
	  /* transition */
	  -webkit-transition: all 0s;
	  -moz-transition: all 0s;
	  -o-transition: all 0s;
	  transition: all 0s;
	}
	.vjs-default-skin .vjs-big-play-button:before {
	  content: "\e001";
	  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: 2.6em;
	  text-shadow: 0.05em 0.05em 0.1em #000;
	  text-align: center /* Needed for IE8 */;
	  position: absolute;
	  left: 0;
	  width: 100%;
	  height: 100%;
	}
	.vjs-error .vjs-big-play-button {
	  display: none;
	}
2

Can we get a working demo? Throw that CSS in a codepen and please give us the HTML. We need the HTML before we can do anything.

3

Did you read the comments in the css? It tells you exactly what is what (whomever did that for you should be praised and thanked to the high heavens…good developer! leave comments!). Removing these two lines should do it for you…

/* Need a slightly gray bg so it can be seen on black backgrounds */
	  /* background-color-with-alpha */
	  background-color: #07141e;
	  background-color: rgba(7, 20, 30, 0.7);
1 Like
4

Thanks for the replies

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.