- This topic has 6 replies, 3 voices, and was last updated 5 months, 1 week ago by
David.
-
AuthorPosts
-
July 10, 2020 at 9:41 pm #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
July 11, 2020 at 4:23 am #1359880David
StaffCustomer SupportHi 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/August 11, 2020 at 12:57 am #1396612ic7
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,
SebastianAugust 11, 2020 at 2:19 am #1396718ic7
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
August 11, 2020 at 4:11 am #1396861David
StaffCustomer SupportHi 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/August 11, 2020 at 5:02 am #1396904ic7
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]
August 11, 2020 at 6:10 am #1396993David
StaffCustomer SupportAwesome – 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/ -
AuthorPosts
- You must be logged in to reply to this topic.