[Resolved] Video in header with Elements

[Ralf]

Hi there,

i am trying to find the option in this new Elements stuff to put a youtube video as background…

unfortunately there is no option like it was in the old GP backend…

how can i put a video as header background now ???

thx

[David]

Hi there,

the option was removed as there are so many variables for adding video it made sense to replace it with some code, this article covers how to:

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

[Ralf]

thx David,

are you serious ???… i have to work with html and CSS to put up a header background video ??? … well, i have made many websites with GP so far because it was easy to handle… but now not anymore… in other themes you just have to insert the URL of the video… this change might be a reason why i will work with another theme for future projects… i don’t understand and i don’t like this change/solution – sorry

anyway… thank you !

[David]

The decision was not taken lightly. It was a weigh off between the old system, which was extremely limited in its capabilities or using the simple HTML5 and CSS to provide the full scope of video options. We didn’t feel that requesting users to copy and paste the code would be a huge distraction when it affords them more control.

I personally have an Exported Header Element that is already set up with the HTML and the CSS in a relevant child theme. So when starting from scratch its just a case of import and go.

But I am sorry to hear that you feel this way. And i will pass your comments on to Tom as all feedback is greatly appreciated.

[Tom]

I thought about this extensively before doing it and decided a custom copy/paste solution was the way to go.

There are simply too many options necessary for background videos to fit into the UI. On top of that, using a custom copy/paste solution gives you way more control over the video and surrounding elements.

[Ralf]

Nevermind, it is actually no big deal…and besides, the video hasn’t to be in the header…and don’t get me wrong, you guys are doing a great job and GP is a great theme.
thank you for the support.

[Tom]

No problem 🙂

[Raina]

I know this is an old thread but I was considering trying to do this myself. Let me know if I should make a new thread. However, I was wondering how I actually use the video header code.

I’m currently working with one of the sites from the library (Catalyst) which includes a header element. Do I just plug the HTML code into that header element with the URL of the video and then add the CSS to my additional CSS in the customizer? Or should this be a separate element – and if so, how do I reference it in my header element?

Any help will be appreciated!

[David]

Hi there,

Do I just plug the HTML code into that header element with the URL of the video and then add the CSS to my additional CSS in the customizer?

That is correct 🙂

[Raina]

Got it. That was pretty easy!

[David]

Glad to be of help 🙂

[Kenny]

Hello,

I went to the page here to help put a video in the header: https://docs.generatepress.com/article/page-hero-background-video/

It says: “We just need to add some HTML into the content area, and add some CSS to our site. The first thing we need to do is structure our HTML within our Element content.”

No matter how much I search or Google, I can’t find this “content area” or where to add the CSS, never mind “structuring our HTML within our Element content”! I know it’ll be something simple but I can’t just see it.

Any pointers on where it is? Thanks in advance!

[Leo]

Can you open a new topic for your question?

Thanks 🙂

[Soren]

I got the video showing by adding a “container” and HTML element inside the container.
How do I add a H1 header, text, and a button, on top of the video, inside the same “Container”?

[Ying]

Hi Soren,

Are you creating the background video using this structure?
https://docs.generatepress.com/article/background-video/

If so, you can add other elements inside the container, above the html block.

[Author]

Posts