Hi there, I uploaded a video at: Page Header Settings -> Video Background. I'm using this way because I love the Box roll header effect.
On my desktop looks fantastic. The problem is on the mobile version, because 1) appears really cut, and 2) takes a lot to be loaded. So, what can I do to solve this? Is there a way to 1) check some kind of "responsive" box that I'm not seeing, and 2) can I upload a lighter version for mobiles?
I've been trying that and I get the same results. I reduce the size of the video to 3.1 mb. I exported in VP8 and VP9. I also try uploading it in the Video WebM Upload, Mp4 and OGV text fields, and I still have the same results.
Unfortunately, adding a 3mb video would make your page load slow. We would suggest using the "Self Hosted Video Player" instead of using the Page Header.
The Video can be resized with a CSS Snippet though you will have gaps on top and bottom.
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):
@media only screen and (max-width: 690px) {
video.nectar-video-bg {
width: 100% !important;
/* object-fit: cover; */
}
}
/* change background-color */
@media only screen and (max-width: 690px) {
html.js #page-header-bg[data-parallax="0"].not-loaded {
background-color: #c31e20;
}
}
Also try removing the Text from the Video and try using a Nectar Slider instead with the Video just being a background and the Text being individual slides.
Hi there, the code looks good. I tried but the video is still not loading. I'm testing with a 143k video.
I tried on the Video WebM, MP4 and OGV Upload. So the problem is not the video.
Why I'm not using Nectar Slider. Because this video is just a launching promotional, I have an slider below the video (https://test2020.pulsante.org/). The think is that I want to use a "preview" with the Box Roll Header effect. BUT, if you tell me that I can have that effect in the nectar slider I'll try it.
I like a lot the solution of disabling the Video Background as you showed me. But, the Box Roll header effect is still there, showing me an empty space (https://test2020.pulsante.org/), how can I remove it just from mobile? Maybe adding asome code somewhere?
Please, if you can help me with that, I will finally have the opportunity of progress in other areas. THANKS.
Unfortunately its cant be removed with CSS alone as JS code controls the whole transition effect. If you remove the Box Roll option then it can be removed for mobile using CSS.
Hi there,
I uploaded a video at: Page Header Settings -> Video Background. I'm using this way because I love the Box roll header effect.
On my desktop looks fantastic.
The problem is on the mobile version, because 1) appears really cut, and 2) takes a lot to be loaded.
So, what can I do to solve this? Is there a way to 1) check some kind of "responsive" box that I'm not seeing, and 2) can I upload a lighter version for mobiles?
Hey Tarick,
Thanks for using Salient.
Try passing the Video through the online convertors to make it web compatible: http://themenectar.com/docs/salient/page-builder-row/#video-background .
Thanks
ThemeNectar Support Team
Hi Tahir,
I've been trying that and I get the same results. I reduce the size of the video to 3.1 mb. I exported in VP8 and VP9.
I also try uploading it in the Video WebM Upload, Mp4 and OGV text fields, and I still have the same results.
Can you please check what's going on please.
Thanks.
Hey Again,
Unfortunately, adding a 3mb video would make your page load slow. We would suggest using the "Self Hosted Video Player" instead of using the Page Header.
Thanks
ThemeNectar Support Team
Hi Tahir, I can reduce the size of the video, that's a secundary problem. But you are not answering about the responsive issue.
The Video can be resized with a CSS Snippet though you will have gaps on top and bottom.
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):
@media only screen and (max-width: 690px) { video.nectar-video-bg { width: 100% !important; /* object-fit: cover; */ } } /* change background-color */ @media only screen and (max-width: 690px) { html.js #page-header-bg[data-parallax="0"].not-loaded { background-color: #c31e20; } }Thanks
ThemeNectar Support Team
Also try removing the Text from the Video and try using a Nectar Slider instead with the Video just being a background and the Text being individual slides.
Thanks
ThemeNectar Support Team
Hi there, the code looks good. I tried but the video is still not loading. I'm testing with a 143k video.
I tried on the Video WebM, MP4 and OGV Upload.
So the problem is not the video.
Why I'm not using Nectar Slider. Because this video is just a launching promotional, I have an slider below the video (https://test2020.pulsante.org/). The think is that I want to use a "preview" with the Box Roll Header effect. BUT, if you tell me that I can have that effect in the nectar slider I'll try it.
Thanks,
Hey Again,
You need to add both MP4 and Webm file formats. Also i can see the video in Chrome. On which device is it not loading for you ?.
Thanks
ThemeNectar Support Team
Hi there.
Thank you for your support in all this process. I already added in all the fields. Thanks.
Doesn't work as I expected on mobile, so my questions is, is there a way to reproduce the video, only in Desktop version?
Maybe adding some code as the one you send me for the CSS?
Thanks.
Hey Again,
Doesn't work as I expected on mobile?
- You can turn off the Mobile Video using this Option:
is there a way to reproduce the video, only in Desktop version?
- Are you not seeing the Video on Desktop?. Which browser are you testing in ?.
You seem to have added webm in the MP4 and OGV fields as well. The Correct formats need to be linked to each field:
Thanks
ThemeNectar Support Team
Thank you!!!
:)
I like a lot the solution of disabling the Video Background as you showed me. But, the Box Roll header effect is still there, showing me an empty space (https://test2020.pulsante.org/), how can I remove it just from mobile? Maybe adding asome code somewhere?
Please, if you can help me with that, I will finally have the opportunity of progress in other areas.
THANKS.
Hey Again,
Unfortunately its cant be removed with CSS alone as JS code controls the whole transition effect. If you remove the Box Roll option then it can be removed for mobile using CSS.
Thanks
ThemeNectar Support Team