Video background from youtube

Hi there,

this article explains:

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

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>

2. I installed simple CSS and pasted the CSS code from the article.

Where did I go wrong?

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.

Is it possible to add a play button to the video, so that it resumes, with audio?

You can try adding the controls value to the <video tag> just like the loop muted autoplay

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.

Hi there,

mobile devices auto mute background videos, so there is no simple solution for that.

Hi David,

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.

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: hide-on-mobile and hide-on-tablet.

E.g

<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-desktop class instead.

Hi David,

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?

Thanks,
Jan

Can you open a new topic for your question?

Thanks :)

Sure, the new topic/ Question is available here: https://generatepress.com/forums/topic/elements-page-hero-background-video-controls/

Thanks :)