I am developing a site for a client, and they wna o have short video playing in the Hero section of the home page. Said video should be overlaid with red.
So, if I set it up with a static image, everything is fine. However, if I say to use a video – noting happens, and he Hero section is just solid red.
As there seems to be distinction between self-hosted videos and YouTube videos, I tried it with a YouTube video just as an experiment. The video played but it was small, in the top-left corner of the Hero, and not overlaid with red.
There seems to be something wrong with the Hero widget, or I’m setting it up wrongly. Either way I could do with so help.
The site is here: jrfryatt.co.uk
Thanks for any advice/help.
Hi John
Thanks for reaching out.
Please, could you try temporarily switching to a default theme like Twenty Twenty. Your theme is adding SiteOrigin styling, it would be useful to run this quick test to see if that styling is involved in the problem. The test should only take a minute or two, you’re just checking to see what happens with Twenty Twenty as your activated theme.
Hi Andrew,
Thanks for your response.
I activated the Twenty-Twenty theme, instead of Business Key, and the problem still exists. Obviously the layout of the page was messed up, but a static background image still displays fine, whereas the video background does not.
Regards, John
Thanks for trying. If possible, please, send an export of the page and we’ll take a look. You can download the JSON layout by editing the page and clicking on LayoutsImport/ExportDownload Layout. Upload the JSON file to WeTransfer.com or a similar site and send us the link.
Ok, thank you.
The JSON file is here: https://www.dropbox.com/t/mo7Tp6B8r2Aa5kxg
Thanks.
The video seems to play normally for me locally. I’ve downloaded the video from your site and added it to the media library in our Corp demo (I’m not using the external URL field) https://demo.siteorigin.com/corp/test-page/.
The Hero adds a background image overlay by reducing the opacity of the background image. It’s an alternative method of adding an overlay in that we’re actually seeing the background. The Hero doesn’t currently have a method of adding an overlay to videos.
Given that a video overlay isn’t possible with the Hero, do you want to keep troubleshooting this issue or would you rather stop and look for a method of adding a video with an overlay?
Hi Andrew,
Ok, thanks for that. I think I am misunderstanding something….
How did you make the video play? Is that as a result of setting the video background for the hero?
I can see that there is no overlay (red or otherwise) but what settings did you use to make that happen?
How should I configure other Hero settings to achieve this?
As an alternative can you see any problem if I simply make the video have a red overlay (well, not really an overlay, just red-biased in it’s colour) outside of WordPress, then just use it like a regular video?
Thanks, John
Hi John
Thanks for your feedback.
I didn’t do anything unique to get the video to play. I downloaded it from your site, uploaded it to the Media Library of the Corp demo, and then added it to the Hero in the same place the video was previously added.
The Hero doesn’t currently offer an overlay for videos, only for images. I thought it best to pause here because if an overlay is a requirement of this row then it wouldn’t necessarily make sense to continue to troubleshoot the video issue. It might make more sense to save time and pivot to a solution that does offer a video overlay.
Still confused, how did you prevent the overlay from being there?
The issue is that the video isn’t playing on your site, we’d need to troubleshoot that. When we fix the issue, there won’t be an overlay, if you’re ok with that end result, no red overlay, we can proceed.
Ok, I see what you mean.
I would like to get the video working.
a3 Lazy Load might be involved, you can perhaps try temporarily deactivating the plugin to see if that helps.
That’s it! Excellent!
Thanks very much for your help Andrew, I can move forward now.
Best wishes, John
Super, glad to hear that helped. You can perhaps check their documentation for how to exclude certain videos or images.
I will, and thanks again.
John
I’m glad we could help. Cheers for now :)