It looks quite good on desktop, however when you start resizing down the window, it gets cropped on the right and left side, little by little. And when you reach mobile size, it's like half of the video is cropped.
So do you know how can I get this video permanently resized so that it keeps its 16/9 ratio?
Here are the settings I currently have.
Thanks!
PS: I'm talking about the full width video, at the bottom of the page (not the one with the text on its right side)
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):
video.nectar-video-bg {
width: 100% !important;
height: auto !important;
}
Oh just one thing Tahir: I noticed that, with this code, there's a big empty space between the video and the content below on mobile devices (tablets and smartphones)... do you know if this is fixable?
Hey guys,
I just wanted to know how could I get a full width video perfectly resized, without cropping, no matter what the screen size?
See this video: https://agence-hetcetera.com/portfolio/travel-oui-sncf/
It looks quite good on desktop, however when you start resizing down the window, it gets cropped on the right and left side, little by little. And when you reach mobile size, it's like half of the video is cropped.
So do you know how can I get this video permanently resized so that it keeps its 16/9 ratio?
Here are the settings I currently have.
Thanks!
PS: I'm talking about the full width video, at the bottom of the page (not the one with the text on its right side)
Hey Again,
I am afraid there is no way to resize a Youtube Video at the moment other than adjusting the Column its in.
Best
ThemeNectar Support Team
Hey Tahir,
I'm adding an update to this ticket: eventually I didn't host the video on Youtube, but on Wordpress.
So what I did is enabling background video for an empty row that I created, then I added the video link.
I set the row's type to "Full Width Content" and, to make the video visible, it seems I had to turn on "Full height row".
But of course, when I do that, then the video always takes the full height of the device it's played on, and I don't want that.
I'd really like the video to keep its 16/9 ration on every device.
You said it wasn't possible for a YouTube video, but what about a Wordpress-hosted one?
Thanks Tahir!
Best
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):
video.nectar-video-bg { width: 100% !important; height: auto !important; }Thanks
ThemeNectar Support Team
Hey Tahir,
Thanks for your reply, I added the code you provided but it seems it didn't change anything... do you know if something else can do the trick?
Best
I dont see the css on the page ?.
ThemeNectar Support Team
Thanks for the tip Tahir, I had emptied the cache with another plugin that didn't seem to work, but with W3 it's all okay now :)
Best
Oh just one thing Tahir: I noticed that, with this code, there's a big empty space between the video and the content below on mobile devices (tablets and smartphones)... do you know if this is fixable?
Best
Hey Again,
Turn off the Row "Full Height" Option and check : http://prntscr.com/riec8l .
Best
ThemeNectar Support Team
Hey Tahir,
Sorry I should have told you before, but when I turn off this "Full height row" setting, the video just completely disappears.
Do you know if we can fix this?
Best
Try adding Column Padding instead.
Best
ThemeNectar Support Team
Are we talking about this? I added 10%, but I'm afraid it did not change anything :/
Best