[Support request] Video background from youtube

[Lars Dons]

Hi,
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.

[David]

Hi there,

this article explains:

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

[Lars 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&#8221; 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?

[David]

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.

[Lars Dons]

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

[David]

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

[Lars 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.

[David]

Hi there,

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

[Lars Dons]

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.

[David]

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.

[Jan]

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

[Leo]

Can you open a new topic for your question?

Thanks 🙂

[Jan]

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

[Leo]

Thanks 🙂

[Author]

Posts