[Support request] Elements/ Page hero/ Background video/ Controls

[Jan]

I successfully created a background video based on this tutorial…

https://docs.generatepress.com/article/page-hero-background-video/

…and added the controls value to the <video tag> as suggested by David in this topic: https://generatepress.com/forums/topic/video-background-from-youtube/

This allows users to unmute the video anywhere they want, but also hides the video at mouse over.

Question: How do I limit the controls-interaction to an area around the background-video-content only? I added the text “Ton an” (which means “unmute” in English) to show you where I would like the interaction to be possible.

I was thinking along the lines of adding a transparent layer (z-index) which cover 90% of the video and leaves only 10 % uncovered on the right hand side of the screen.

Any thoughts on how that can be included into the HTML of the page hero?

Thanks,
Jan

[David]

Hi there,

can you check the URL you provided as its taking me to a Not found page.

[Jan]

Hi David,

sorry for not getting back earlier.

Please try again. The page should be loading just fine now.

Thanks,
Jan

[David]

I am not sure i fully understand – and i cannot see the “Ton an” text on the home page.
Do you have a mockup of what you’re trying to achieve ?

[Jan]

Hi David,

sorry, my bad. I had to remove the placeholder in order not to irritate users. Please find enclosed a mockup of the position of where I’d like the unmute-button to appear.

Thanks,
Jan

[David]

The best method – which would require some custom development is to register your own video controls for the element…

This article explains how:

https://blog.teamtreehouse.com/building-custom-controls-for-html5-videos

It provides the HTML and JS required to just add any control eg. Mute/Unmute. You can then absolutely position it within your element.

[Jan]

Hi David,

thanks for you instant reply. I’ll look into it and then let you know accordingly.

Best regards,
Jan

[David]

You’re welcome

[Author]

Posts