How To Create A Custom Css Class For Video - Question | JoomShaper
🎃 Halloween Sale is Live! Get 35% OFF on all plans. Sale ends soon! Get Offer
Back to the questions

How To Create A Custom Css Class For Video

A

Aldus

SP Page Builder 4 months ago

Hi, I need to create a custom css class to show video on intere page. I make this css code in my custom.css file but there is an error. I think that error is in row "background-image"... In fact if I insert the class video_1 it doesn't recognize it

.com-sppagebuilder .video_1   { 
  background-image: url('www.xyz.it/media/videos/2025/06/05/my_video.mp4');
  background-size: cover;
  background-attachment: scroll;
  background-position: center;
  }

Please, can you tell me a correct syntax?

If there was the possibility of a single css code to see the video in the entire page (instead of for a single section) it would be perfect for me and I could do without creating a css class

Thank you

0
1 Answers
Order by
Oldest Newest Votes
Atick Eashrak Shuvo
Atick Eashrak Shuvo
Accepted Answer
Support Agent 4 months ago #195067

Hi,

Thank you for your message.

Unfortunately, CSS does not support using video files (.mp4, .webm, etc.) with the background-image property — this property only works with image formats such as .jpg, .png, .gif, etc. That’s why your custom class with background-image: url('...my_video.mp4') is not working — it's simply not valid CSS syntax.

Key Points:

  • background-image only accepts image formats, not video.
  • It’s not possible to display a video using CSS alone. A <video> element is required in the HTML to play videos.

There is no way to add a background video purely via CSS.

0