I understand the video poster image is set to cover by default. But i also seem to have a second duplicate image that isn’t set to cover and appearing on top of the first image
I have deliberately broken the video link so as I can see the poster image working (or not working in this case)
If i set this code to display none. Both Images disappear
.x-video.bg.poster, .x-video.x-video-bg.poster {
display:none;
}
Hello @etah,
Thanks for writing to us.
To get rid of the multiple background image I would suggest you add the custom CSS code on the element CSS Go to the Header Bar —>Customize —>Element CSS.
$el .x-video.player.bg.hide-controls.poster{
background-image: none !important;
}
The purpose of providing custom CSS is to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.In case you have no idea about coding you can subscribe to One where customization questions are answered.
Hope it helps.
Thanks
The image displayed with this code doesn’t cover the background. as you can see (i have added the css) now the background no longer covers the header area. Initially there was a second image that did properly cover the background when we had double images showing. Is it possible to show that one and hide the the smaller one that seems to be on the inner video. It would make more sense as this would better match what appears if and when the video displays.
Hey @etah,
I’m currently confused because you set a Video as a background but your video does not exist. Your video URL is (check the secure note).
With that said, I’m wondering, if you simply need a background image to cover the Bar or really have a video. If you really need to have a video background, make sure you have a working video to start.
If you just need a background image, and set the Background Type to Background Image then the Size to Cover.
By the way, the doubling of the Background Video Poster looks like a bug ONLY if you use short-wide in aspect ratio images like shown in the following screenshot. I’ll post this in our issue tracker so that this will be queued to be further investigated by our development team.
Your image is a bit in the short-wide range.
If you use tall images close to square, it doesn’t double-up so please kindly try changing your image to a 3:2 or 1:1 aspect ratio and best to use a high resolution.
Hope that helps.
As I said in the earlier post I disabled the video deliberately to test the poster… as the video doesn’t seem to play on some mobile devices so i wanted to test how the poster will look in that case… I will try a different format image and see if that helps…
I don’t really understand why there are two images displaying in the first place (is that the bug) and what is the point of this default code
.x-video.bg.poster, .x-video.x-video-bg.poster {
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
}
If you then prevent that background appearing with this code
$el .x-video.player.bg.hide-controls.poster{
background-image: none !important;
}
OK so I now added a 1.1 image as the poster image, This is even worse! as I said in my second post and before i made your changes there was two duplicate images displaying one which covered the bar and one (the one now displaying) which didn’t. Cant you somehow hide this image and display the other one? See the first image in this thred.
IMPORTANT: Please also read the post above…
In summary and using a more taller 1.1 image
If you look closely, the second image behind the first one does appear to be working as intended and covering the bar properly.
I have left the default view on the development site now so you can see the effect of a 1.1 image
Thanks again for all your help
Hey @etah,
Apologies if I missed the broken video part and thanks for testing other image aspect ratios. My recommendation was based on my discovery in my site and maybe you can use an image background to avoid the doubling of the image effect.
Back to the issue, I loaded up your image in my test site and got the same result.
That is because your image is lower in resolution that my monitor. Your image is 1023px X (width or horizontal) Resolution while the monitor I’m currently on is 1366px.
I loaded up a 1400px X Resolution 1:1 image and there’s no double image issue.
I’ve mentioned previously that you need to use a high resolution image.
Kindly try a high resolution image.
Regarding your question:
No. I’ve previously said that the doubling of the image could be a bug BUT, when you showed me that it still doubles up when using 1:1, I realized now that the video poster is trying to compensate for mismatch in aspect ratio and also if the image is low resolution just like the effect in video sites. This is not a bug. You just have to use the best poster image.
With that said, we will not support any custom coding that will be applied to the video background poster nor any custom coding in general because that will be tweaking how a feature of Pro is designed.
Hope that helps and thank you for understanding.
So I have now used a 1400 x 993 image as suggested by you - I even tried a 2000 x 2000 image, whatever image resolution you use it still displays 2 images and the foreground image does not cover the bar area as its supposed to do, as you can see even clearer when the viewport changes
The foreground image is not acting as a background image with cover applied in anyway. How is this in any way acting as intended? Or are you implying i need to apply custom coding to make the poster work?
Hey @etah,
Thank you for your cooperation. After more testing, I have replicated the issue again, so I’d go back to thinking that this is a bug. Because of that and I see a simple solution, I’ll provide a workaround or a temporary solution which works in my test site as well as yours.
Add the following code in Theme Options > CSS.
.x-bg .x-video .x-video-inner video {
object-fit: cover;
}
Thanks.
Awesome works a treat. Thank you very much for your help in resolving this.
Also please see secure note.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.
