Hi there,
Was wondering if you could help me.
I have spent a bit of time trying myself, but just don’t seem to be able to achive the fully responsive effect I need.
What I am wanting to achieve is
- a “hero” video on loop in my header (as the background)
- that is fully responsive… to different device, screen, browser window sizes / container sizes, and/or CTRL +/- (browser zoom in/out)…
- but using native pro elements / CSS instead of using a Layerslider “hero” slider to achieve the responsiveness
- as activating and loading layslider adds plugin code/resource requirements/load time to the site.
Please see secure note to login and see the page https://byronenergetics.com.au/ (Page: Byron Energetics, using “Site Header”)
- this is what I want and works well (but uses layslider “Hero Video BG 600x850” with the layout set to “hero”, a layerslider video element, and the appropriate canvas and video dimensions (600x800).
- the video is always contained, centered, sized to 85% vertically to allow for the nav bar
- the menu system responds responsively and independently to the background video (layerslider / hero layout) and that is good
Can I achieve the same using just native pro elements / CSS?
I have tried using (within the header within the header bar/container)
- a row (absolute / Z index) / column as the container and either a column background video or a video element within the column
- a DIV (absolute) with different width and height settings (px/vh/%… to leave room for the menu down the bottom), flexbox/no flexbox, with a) a background video on loop or b) a video element within the DIV
Can you please see / change / play with PAGE: Test HEADER NOT LAYERSLIDER) that uses header “Header (NOT Layerslider)” to try to achieve this?
Is there something that I am missing to make the video be contained and responsive within a column or DIV as its container?
Or… Is there some way I can see what settings the Layerslider / Hero layout slider uses - and can then replicate and implement these using native PRO element settings and/or CSS on the video background, video element or the container (column/Row/div?) within my custom header?.. to achieve that same fully responsive background video in the header?
OR is there an asset in the design cloud or max or anywhere else that I could refer to?
I have had several projects where I’ve used a Layerslider hero slider to solve this responsive background hero video issues… but would love to use just PRO elements instead.
Any help would be hugely appreciated… (and perhaps this could be added as a design cloud element for others to reference?)
Kind regards
Simon
