I've added a background video to my hero. It displays perfectly on the desktop but on mobiles and tablets the video animation is almost no longer visible on the screen (it goes off to the right of the screen). Is there a way to ‘force’ the video to move to the left?
The video works on all media. My problem is just the position on mobile (see attached photos). Ideally, I'd like the rocket to appear on the screen on mobile.
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
@media only screen and (max-width: 999px) {
video.nectar-video-bg.nectar-lazy-video {
position: absolute;
right: -80%;
}
}
Hello,
I've added a background video to my hero. It displays perfectly on the desktop but on mobiles and tablets the video animation is almost no longer visible on the screen (it goes off to the right of the screen). Is there a way to ‘force’ the video to move to the left?
Thanks in advance :)
Thomas
Hey Thomas,
Thank you for reaching out to us.
Only Self Hosted Videos would play on Mobile if we do not turn them off in the Salient Theme Options Panel > General Settings > Functionality
- Please convert the videos and then add them as per their appropriate file format: http://themenectar.com/docs/salient/page-builder-row/#video-background .
- Make sure they are in 16:9 ratio for the mobile to render them correctly.
I hope that helps.
Thanks,
Thanks for your reply.
The video works on all media. My problem is just the position on mobile (see attached photos). Ideally, I'd like the rocket to appear on the screen on mobile.
Attached files: Capture d’écran 2024-09-23 à 15.20.25.png
Capture d’écran 2024-09-23 à 15.20.05.png
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
@media only screen and (max-width: 999px) { video.nectar-video-bg.nectar-lazy-video { position: absolute; right: -80%; } }Thanks
ThemeNectar Support Team