changed a defined value inside the element

Question

I'm trying to change the defines css inside the div element of embed videos example this is the embed codes for poster

<div class="vjs-poster" tabindex="-1" 
style="background-image: url(streaming-auto-generated-poster.jpg);"></div>

I tried this code but it won't change the background since the default background are defined inside the div

.vjs-poster{
background-image:url(the post thumbnail);
}

what I want is to customized the background-image with my own

Answer 1

CSS will use the most specific rule when multiple are applicable, and by default style will trump a class definition. You can use !important to override this.

.vjs-poster {
  background-image: url(my-own-poster) !important;
}

More information here.