different hero images/videos on different devices

Hello,

You can use the Responsive Classes to use different Hero Backgrounds on different devices. Example:

.device-lg .custom-hero-bg {
	background-image: url('images/hero-lg.jpg');
}

.device-sm .custom-hero-bg {
	background-image: url('images/hero-sm.jpg');
}

Make sure that you add the .custom-hero-bg Class to the Hero Section. The Responsive Classes are as follows:

.device-xl – Class for Large Devices >=1200px

.device-lg – Class for Medium Devices >=992px to 1199px

.device-md – Class for Tablets

.device-sm – Class for Landscape Mobiles or Phablets.

.device-xs – Class for Portrait Mobiles

You can add these Custom CSS codes in the css/custom.css File.

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Hello,

This will work for Videos as well. But it is recommended to use Bootstrap Display Utility Classes: https://getbootstrap.com/docs/4.5/utilities/display/ for the Videos.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.