I'm trying to achieve something that is driving me insane.
Client wants a video background. However the expected behaviour would be respecting the 16:9 aspect ratio as much as possible but definitely preventing from scrolling through the video one a very wide screen.
What I tried:
1. Using the Header Video Background feature with Full Height Row enabled. Works great but then the video on Mobile becomes vertical and zoomed in (because it a full height row).
2a. Use Salient's video background to a row. With Full height Row this works again, however again vertically centered and zoomed in video on Mobile.
2b. Use Salient's video background to a row. Without full height row enabled I get the correct size on Mobile but then I have to scroll on a wide screen because the aspect ratio stays 16:9
3. Use a self hosted video player in a full width content row. Works great on mobile but have to scroll on a wide screen.
Could you guys help me out?
Best,,
Lennart
Try setting up the Video using the Self Hosted Video player as you need, we can then adjust the aspect ratio for each device if needed using Custom CSS.
Thanks for the quick reply. I've done that (although Full Height doesn't seem to work).
The website is visser-dokkum.nl if that helps. Once I'm on a wide screen the video keeps enlarging and I have to scroll vertically before getting to the next content.
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):
/* on scren size wider than 1000px change the video height to 100% viewport height minus the header height. */
@media only screen and (min-width: 1000px) {
.wpb_video_widget.vc_video-aspect-ratio-169 .wpb_video_wrapper {
padding-top: calc(100vh - 116px) !important;
}
}
One more bonus question: is it possible to use Youtube for Desktop and Self Hosted Video for mobile (challenge with file size / quality for self hosted)?
Thanks. I know I can use Youtube / Vimeo but can I use YouTube / Vimeo for Widescreen / desktop and then on smaller screens / mobile fall back to self hosted? Tried that with hiding rows for smaller screens but then it doesn't load when dragging my window on desktop.
Hi there,
I'm trying to achieve something that is driving me insane. Client wants a video background. However the expected behaviour would be respecting the 16:9 aspect ratio as much as possible but definitely preventing from scrolling through the video one a very wide screen.
What I tried:
1. Using the Header Video Background feature with Full Height Row enabled. Works great but then the video on Mobile becomes vertical and zoomed in (because it a full height row).
2a. Use Salient's video background to a row. With Full height Row this works again, however again vertically centered and zoomed in video on Mobile.
2b. Use Salient's video background to a row. Without full height row enabled I get the correct size on Mobile but then I have to scroll on a wide screen because the aspect ratio stays 16:9
3. Use a self hosted video player in a full width content row. Works great on mobile but have to scroll on a wide screen. Could you guys help me out? Best,, Lennart
Hey BigJetPlane ,
Thanks for reaching out! .
Try setting up the Video using the Self Hosted Video player as you need, we can then adjust the aspect ratio for each device if needed using Custom CSS.
Best,
ThemeNectar Support Team
Hi Tahir,
Thanks for the quick reply. I've done that (although Full Height doesn't seem to work).
The website is visser-dokkum.nl if that helps. Once I'm on a wide screen the video keeps enlarging and I have to scroll vertically before getting to the next content.
Best,
Lennart
Hey Again,
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):
/* on scren size wider than 1000px change the video height to 100% viewport height minus the header height. */ @media only screen and (min-width: 1000px) { .wpb_video_widget.vc_video-aspect-ratio-169 .wpb_video_wrapper { padding-top: calc(100vh - 116px) !important; } }Thanks
ThemeNectar Support Team
You're amazing! Thank you so much.
One more bonus question: is it possible to use Youtube for Desktop and Self Hosted Video for mobile (challenge with file size / quality for self hosted)?
Or am I pushing it then?
Thanks!
Hey Again,
You can use any direct External Video link url such as Vimeo provides to its Pro users.
- Only Self Hosted Videos will play on Mobile.
- Make sure they are in 16:9 ratio for the mobile to render them correctly.
- Convert the videos and then add them as per their appropriate file format: http://themenectar.com/docs/salient/page-builder-row/#video-background .
- Be sure to turn off this option in Salient Theme Options Panel -> General Settings -> Functionality Tab
Best,
ThemeNectar Support Team
Hi Tahir,
Thanks. I know I can use Youtube / Vimeo but can I use YouTube / Vimeo for Widescreen / desktop and then on smaller screens / mobile fall back to self hosted? Tried that with hiding rows for smaller screens but then it doesn't load when dragging my window on desktop.
Best,
Lennart
No, you can only use vimeo direct links or any third party video server for both desktop and mobile if you dont want to self host the videos.
Best
ThemeNectar Support Team