Archived topic
Elements/ Page hero/ Background video/ Controls
7 replies · Started by Jan on March 18, 2021
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
Hi there,
can you check the URL you provided as its taking me to a Not found page.
Hi David,
sorry for not getting back earlier.
Please try again. The page should be loading just fine now.
Thanks,
Jan
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 ?
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
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.
Hi David,
thanks for you instant reply. I'll look into it and then let you know accordingly.
Best regards,
Jan
You're welcome
