Video Background for Home Header

[DJ]

Hello, How am I able to insert a video for my home header instead of an image? Similar to this site https://www.kendallficklin.com/.

Thanks DJ

[David]

Hi there,

you can use a Header Element:

https://docs.generatepress.com/article/header-element-overview/

And this article explains how to add video to that:

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[ic7]

Hi,

in a current project I’m using a page-hero-background-video on the frontpage as explained in this article: https://docs.generatepress.com/article/page-hero-background-video/

Now I want to add the possibility to change the video file and poster image via advanced custom fields that are placed on an acf options page. The fields are called “opt_video_image” (.jpg) and “opt_video_file” (.mp4).

I tried the acf shortcode method ([acf field=”cfname” post_id=”options”]) and the gp template tag method ({{custom_field.name}}), but was not able to retrieve the correct file urls.
Is this possible within the header element and if yes, how would I have to setup the code inside the header element?

Thanks for your support in advance!

Kind regards,
Sebastian

[ic7]

Hi,

I managed to get it to work by setting up my own shortcode and placing it into the header element.
Sorry I didn’t think of this earlier.

Sebastian

[David]

Hi there,

glad to hear you got it resolved – out of interest could you share the shortcode you created ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[ic7]

Hi David,

1. I created a custom shortcode:

function my_hero_vid_shortcode() {
    ob_start();
    get_template_part( 'assets/php/parts/hero',  'video' );
    return ob_get_clean();
}
add_shortcode( 'hero_video', 'my_hero_vid_shortcode' );

2. I added a template part file to the shortcode with the required acf fields:

<video autoplay playsinline muted loop preload="auto" poster="<?php the_field( 'opt_video_image', 'option' ); ?>" class="hero-video">
	<source src="<?php the_field( 'opt_video_file', 'option' ); ?>" type="video/mp4">
</video>

3. I added the custom shortcode to the header element:

[hero_video]

[David]

Awesome – really appreciate you sharing this as other users will find this useful.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts