Article - Customizing Video Player Style

Once you have added a video to your webpage, you can customize the video player style by adding a border or shadow.

Adding a border to a video player:

1. Click on the video player to open the Video panel.

2. Select Style.

 

3. From the Style panel, select Border.

 

4. On the Border panel, use the color picker to select a border color.

 

5. Use the Width slider to set the border width. You can also enter the numeric value, in pixels, in the text field provided.

6. Use the Padding slider to set the border padding. You can also enter the numeric value, in pixes, in the text field provided.

7. Use the Corners slider to set the curvature of the corners. This setting is to create rounded corners. You can also enter the numeric value in the text fields provided.

Changes are auto-saved and will apply automatically. 


Adding a shadow to a video player:

1. Click on the video player to open the Video panel. 

2. Select Style.

 

3. From the Style panel, select Shadow.

 

4. On the Shadow panel, use the color picker to select a shadow color.

 

5. Use the Horizontal offset slider to set the horizontal offset of the shadow. You can also enter the numeric value, in pixels, in the text field provided. A positive value means the shadow is drawn to the right side of the video player; a negative value means the shadow is drawn to the left side.

6. Use the Vertical offset slider to set the vertical offset of the shadow. You can also enter the numeric value, in pixels, in the text field provided. A positive value means the shadow is drawn below the video player; a negative value means the shadow is drawn above.

7. Use the Blur slider to customize the blur radius. You can also enter the numeric value in the text field provided. The blur radius defines how big and how much blurred the shadow is. A larger value makes the shadow lighter, and a value of 0 makes the shadow’s edges sharp.

8. Use the Spread slider to customize the spread distance. You can also enter the numeric value in the text field provided. The spread distance makes the shadow bigger (ie. expand) in all directions.

 


Changes are auto-saved and will apply automatically. 


 

Published: September 9 2015

Found in Categories