-
Posts
-
Hi as requested I’m opening a new thread regarding my homepage with a full width video background.
The issue:
My homepage is showing black bars on the left and right side of my full screen video background when I load the page. When I resize my browser window slightly the video becomes full screen and the black bars dissappear. When I then navigate to another page on the site and return to the homepage the black bars are there again until I resize my browser window again. This seems to happen with any screen size above +/- 1300 pixels…..My homepage set up:
Colorsection with videobackground. The color section also includes a fallback image and slideshow for when the site is viewed on a mobile deviceSystem/Browser info:
The issue is currently showing for me on: a Mac (chrome, safari, firefox) and PC (chrome)cheers Cindy
Hey yarabe73!
Please share the link to the page where we can inspect the element in question and help you resolve it :)
Cheers!
VinayHi!
We are working on your ticket please wait while we update the results here soon.There is a conflict between Layerslider shortcode and background video. The background video works fine without the LS shortcode or LayerSlider
A workaround for this would be to use a color section with heading rotator element.
Please check the link in private content we created a test page.
Cheers!
VinayHi Vinnie,
Thanks for looking into it. That does seem to work, however i don’t want text to rotate… but to animate in and stay on the screen….
What I’ve done is put all the text in the video and put it as a background video into the colorsection so I won’t need the LayerSlider there anymore. But…. on mobile versions of the site the video should be replaced with a static background image and show the LayerSlider….Could a possible solution be the following:
1. For desktop versions of the site use a colorsection with just a videobackground.
2. For Mobile versions of the site, have a seperate colorsection with a background image and the 2 LayerSliders (one for portrait and one for landscape mode)?I suppose that could be achieved by having 2 colorsections on the page (1 for desktop and 1 for mobile versions) then give them both a different ID and add display:none etc in the mediaqueries?
Can you let me know if I’m right about that?
Cheers, Cindy
Hi!
That is the perfect way to show the LS on mobile version only. You can use the css below to hide the desktop version in mobile and hide the mobile version in desktop…
/*Show only in mobile or desktop*/ @media only screen and (min-width: 769px) { .only_mobile { display: none !important; }} @media only screen and (max-width: 768px) { .only_desktop { display: none !important; }}Cheers!
VinayHi Vinnie, I’ve tried it… but as the layerslider is then still on the same page as the background video (allthough in different colorsections) it still causes the black bars to appear…
One thing I did notice is that when I add to my custom CSS the following:
#top .av-section-with-video-bg {
position: inherit !important;
}the black bars become less wide…. I’m still trying to figure out a solution/workaround
Also…. If I set the colorsection to at least height at least 75%… the blackbars disappear….
but then the video is only full width not full height also…I think I found a solution….
1. Set the colorsection to: at least 75% height of browser window
2. Add the following to the custom CSS (replace ID-OF-MY-COLORSECTION with the ID you have set for your colorsection):
#top #ID-OF-MY-COLORSECTION .av-section-video-bg video {
top: 0px !important;
}#top .av-section-with-video-bg {
position: inherit !important;
}Looks like this is working for me, hopefully this could be useful for someone else too
- The topic ‘Homepage video background showing black space on left and right side’ is closed to new replies.