[Support request] Video Background for Home Header

Home Forums Support Video Background for Home Header

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1359719
    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

    #1359880
    David
    Staff
    Customer Support
    #1396612
    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

    #1396718
    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

    #1396861
    David
    Staff
    Customer Support

    Hi there,

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

    #1396904
    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]

    #1396993
    David
    Staff
    Customer Support

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

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.