[Support request] Insert youtube video in the header

[Ana]

Hi,

I contact with you because I would like to insert a youtube video in the header of my web: https://www.esvision.es/

Can you indicate me if this is possible?

Thanks and regards,
Ana

[David]

Hi there,

will this be a background video that auto plays?
Or just a YouTube player ?

[Ana]

Hi,

it will be a background video in the header but it should not do auto play. It´s like if I entered a block of youtube with Gutemberg that it shows the screen but you have to click to play.

This the video: https://www.youtube.com/watch?reload=9&v=Ln8aHPxkSi0

Can you please help me?

Thanks and regards,
Ana

[David]

This doc explains how to create on with a Header Element:

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

In the HTML you will see the autoplay attribute – you would need to remove that.

[Ana]

Dear David,

thanks for your answer.

As I need to add a youtube video (https://www.youtube.com/watch?v=Ln8aHPxkSi0). I´m not sure how to modify the routes below as they are for video and not a youtube url.

<video loop muted autoplay playsinline poster=”URL/TO/poster.jpg” class=”background-video”>
<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>

Your Element content in here.

Can you please help me?

poster=
source src=

Thanks and regards,
Ana

[David]

Aah sorry my bad.
You cannot add a YouTube video as a background or a <video> element as they require a direct URL to the video file, which YouTube does not provide or allow.
To do that the video would have to be hosted on your server or using a premium service like Vimeo to host it for you.

The most you can do with YouTube is to use a core Video Embed Block, which you can add using a Block Element:

https://docs.generatepress.com/article/block-element-hook/

[Author]

Posts