I have a video background set on my homepage. If I press the button "Fullscreen Height", it looks great on a computer, but crops off the two sides in mobile view. If I don't select "fullscreen height", then it looks great on mobile, but crops off the top and bottom of the video on a computer view. I'm not sure what I'm missing, or if something is configured wrong, but I would greatly appreciate your help in getting this page to look good on computer and mobile.
- You seem to have added the Video Background in the Page Header Settings . Could you try adding the Video using a "Self Hosted Video Player" Page Element here and see if that resolves your issue:
Thank you. That is a good temporary fix, but doesn't resolve the issue. One of the reasons I purchased Salient was because I love the way the video background works as a header. The look of the self hosted video is similar, but the self hosted video doesn't fill the same space on the screen as the video header did. It leaves a large black border where the header should be, and also black background space on the sides. It's just a different, less dynamic look than the video background was. I'd still like to find out how to make that work, or a way to make the self-hosted video cover the same space that the background video was covering. Thank you!
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
#page-header-bg .nectar-video-wrap video {
object-fit: scale-down !important;
width: 100% !important;
}
@media only screen and (max-width: 690px) {
html.js #page-header-bg[data-parallax="0"].not-loaded {
background-color: #000000 !important;
}
}
I have a video background set on my homepage. If I press the button "Fullscreen Height", it looks great on a computer, but crops off the two sides in mobile view. If I don't select "fullscreen height", then it looks great on mobile, but crops off the top and bottom of the video on a computer view. I'm not sure what I'm missing, or if something is configured wrong, but I would greatly appreciate your help in getting this page to look good on computer and mobile.
Thank you!
Hey Sean,
Thanks for using Salient.
- You seem to have added the Video Background in the Page Header Settings . Could you try adding the Video using a "Self Hosted Video Player" Page Element here and see if that resolves your issue:
Thanks
ThemeNectar Support Team
Thank you. That is a good temporary fix, but doesn't resolve the issue. One of the reasons I purchased Salient was because I love the way the video background works as a header. The look of the self hosted video is similar, but the self hosted video doesn't fill the same space on the screen as the video header did. It leaves a large black border where the header should be, and also black background space on the sides. It's just a different, less dynamic look than the video background was. I'd still like to find out how to make that work, or a way to make the self-hosted video cover the same space that the background video was covering. Thank you!
Hey Again,
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
#page-header-bg .nectar-video-wrap video { object-fit: scale-down !important; width: 100% !important; } @media only screen and (max-width: 690px) { html.js #page-header-bg[data-parallax="0"].not-loaded { background-color: #000000 !important; } }Thanks
ThemeNectar Support Team