- This topic has 13 replies, 2 voices, and was last updated 2 years, 2 months ago by Leo.
January 9, 2019 at 7:38 am #777314Lars Dons
Is it possible to add a youtube video as the source for the page hero background? No video seems to show on my page, when inserting a youtube link.January 9, 2019 at 8:03 am #777349DavidStaffCustomer Support
this article explains:
https://docs.generatepress.com/article/page-hero-background-video/January 9, 2019 at 8:14 am #777356Lars Dons
It either doesn’t or I’m doing something wrong. Let me walk through it in steps:
1. I went to elements, edit “Home Header” and pasted the following in the html section of Page Hero:
<video loop muted autoplay poster=”URL/TO/poster.jpg” class=”background-video”>
<source src=”https://www.youtube.com/embed/X4VAdIP-W5w” type=”video/mp4″>
</video>Your Element content in here.
2. I installed simple CSS and pasted the CSS code from the article.
Where did I go wrong?January 9, 2019 at 8:44 am #777399DavidStaffCustomer Support
Sorry my bad, it only works with a direct link to video file, which Youtube doesn’t provide. You would need to host the mp4 file to use this method.January 10, 2019 at 5:06 am #778140Lars Dons
Is it possible to add a play button to the video, so that it resumes, with audio?January 10, 2019 at 5:34 am #778157DavidStaffCustomer Support
You can try adding the controls value to the <video tag> just like the loop muted autoplayJanuary 10, 2019 at 6:13 am #778185Lars Dons
Well, it sort of helps. However, on the mobile version, I still cannot unmute the video, regardless of how much I turn up the volume. Perhaps this one is unsolvable.January 10, 2019 at 9:16 am #778473DavidStaffCustomer Support
mobile devices auto mute background videos, so there is no simple solution for that.January 11, 2019 at 7:53 am #779281Lars Dons
The issue is that I cannot unmute the video from a mobile device. So essentially, when you open the site on a mobile device, you are met with the poster image with a play button on top of it, which, upon pressing, you open a video you cannot hear.
The only workaround is if I remove mute from the html code, but that’s not a very attractive solution when visiting on a desktop.January 11, 2019 at 8:12 am #779298DavidStaffCustomer Support
We could use media queries to show a different setup.
So first off edit you current markup that has your desktop settings and include the classes:
<video loop muted autoplay poster="URL/TO/poster.jpg" class="background-video hide-on-mobile hide-on-tablet"> <source src="URL/TO/video.mp4" type="video/mp4"> <source src="URL/TO/video.webm" type="video/webm"> <source src="URL/TO/video.ogv" type="video/ogv"> </video>
Now paste a copy of the code below that, so you have two video markups and edit this for your mobile settings and this time add the
hide-on-desktopclass instead.March 18, 2021 at 1:53 pm #1700999Jan
thanks for your guidance on this. I successfully created a background video and added the controls value to the <video tag> which allows users to unmute the video anywhere that want.
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?
JanMarch 18, 2021 at 5:20 pm #1701153LeoStaffCustomer Support
Can you open a new topic for your question?
Thanks 🙂March 18, 2021 at 11:51 pm #1701326Jan
Sure, the new topic/ Question is available here: https://generatepress.com/forums/topic/elements-page-hero-background-video-controls/March 19, 2021 at 3:16 pm #1702371LeoStaffCustomer Support
- You must be logged in to reply to this topic.