Course Content

Adding a Border and Dropshadow to Your Video Player


Murray Gray in Course Content

Dec 09, 2020 - 1 min read. Available on Growth plan or higher.

We've created some great video button styles for you that you can apply to your membership site experience.

To get started:

  • Open any course and open the Advanced Course Settings section
  • Open the CSS sub-section
  • Set the Enable Custom CSS For This Course toggle to ON (green)
  • You should then see the CSS field appear. Add your CSS code to that box alongside any other code you may have already added to it.

Black Border on VIdeo Player


.player {
border:1px solid black;
}

Drop Shadow on VIdeo Player


.player {
box-shadow: 0px 3px 17px -3px rgba(0,0,0,0.36);
-webkit-box-shadow: 0px 3px 17px -3px rgba(0,0,0,0.36);
-moz-box-shadow: 0px 3px 17px -3px rgba(0,0,0,0.36);
}

Black Border AND Drop Shadow on VIdeo Player


.player {
border:1px solid black;
box-shadow: 0px 3px 17px -3px rgba(0,0,0,0.36);
-webkit-box-shadow: 0px 3px 17px -3px rgba(0,0,0,0.36);
-moz-box-shadow: 0px 3px 17px -3px rgba(0,0,0,0.36);
}
HELP ARTICLES
3