Video in header with Elements

Works perfect Ying :-)
https://staging-deliciousdenverfoodtours.kinsta.cloud/

I don't seem to be able to find the "opacity* and make the video more crisp.

Hi Soren,

The opacity can be modified in the CSS in step 4: https://docs.generatepress.com/article/background-video/#step-4

If you placed the CSS in Appearance > Customize > Additional CSS, you'll need to modify the code there.

As for the video, you may try uploading a video with a higher resolution to make it more “crisp”.

Hope this clarifies!

Perfect, looks fantastic now. Thanks Fernando.

You’re welcome Soren!

Has anybody set this up including an unmute button? Your code worked perfectly for me here: https://www.epolarice.com -- but I'd like to provide an unmute button ... or ideally if someone knows a simple way to override the browsers restrictions with audio-on and autoplay.

thanks!

Hi Doug,

Most browsers do not auto play videos with an audio – this is why a muted attributed is needed in the <video> tag.

Here’s an article that may help you with regards to this: https://developer.chrome.com/blog/autoplay/

If you have a button, some browsers, may let you use a script: https://developer.chrome.com/blog/autoplay/#:~:text=Twitter%2C%20and%20YouTube.-,%3Cvideo%20id%3D%22video,-%22%20muted%20autoplay and this would unmute the audio.

In the same way, you would also need a button, and a custom javascript to removes a class of an element. This thread might help: https://stackoverflow.com/questions/10327907/play-pause-html5-video-javascript

Hope this helps!