You can customize a hotspot by adding a background image using CSS. This is a great way to make your hotspot more eye-catching and visually connected to your video content.
To add an image background to a hotspot:
- Open the video in the hotspot editor.
- Select the hotspot you want to style.
- Scroll down to the "Advanced styling" or "Custom CSS" section.
- Paste the following code into the custom CSS field:
background-image: url("https://images2.minutemediacdn.com/image/upload/c_fill,g_auto,h_1248,w_2220/f_auto,q_auto,w_1100/v1555927957/shape/mentalfloss/565grumpycat1_5.jpg");
background-size: 300px 200px;
color: rgba(100.00%, 100.00%, 100.00%, 1.00);
font-size: 45px;
Customize as needed:
- Replace the image URL with your own.
- Adjust the background-size to control how large the image appears.
- Modify the text color and font size for readability.
Use high-contrast combinations so your text stands out clearly against the image.
