16th Mar '23
/
1 comment

YouTube Video Timestamps in Bricks

This Pro tutorial provides the steps to output a YouTube video given its ID with custom timestamps and their description text using ACF Pro or Meta Box fields in Bricks.

Field Group:

Fields being populated when a Page is edited:

Frontend:

We are going to use Bricks' Interactions feature for replacing the iframe embed URL src property's value with the one that's starts at the clicked timestamp and for dynamically removing (from all) and adding a data-active data attribute for the clicked item in the loop.

Step 1

Install and activate ACF Pro.

Create a field group having a Text of field having a name of video_id and a Repeater field having a name of timestamps with sub fields of timestamp (text) and description (text).

Set the location to your desired post type or Page(s).

Here's the exported JSON of the field group from our test site (mirror).

Meta Box

If you are a Meta Box user, set up a field group having video_id text field and a Group field that is cloneable and sortable having these text-type sub fields: timestamp and description.

Field group export.

Step 2

Edit your posts/Page(s) and populate the fields.

Step 3

Add the following in child theme's functions.php (w/o the opening PHP tag) or a code snippets plugin:

This is a BricksLabs Pro tutorial.

For full access login below or create your BricksLabs Pro account

Get access to all 610 Bricks code tutorials with BricksLabs Pro

Related Tutorials..

Pro
Search Results Grouped by Post Types in Bricks

Search Results Grouped by Post Types in Bricks

Updated on 08 Oct 2024 This Pro tutorial provides the steps to arrange the search results by specified post types in a Bricks site. We…
Pro
Post-specific ACF Repeater Galleries as Sliders in Bricks

Post-specific ACF Repeater Galleries as Sliders in Bricks

How to output ACF Repeater field rows with the images of the Gallery-type sub field as a slider.
Pro
Posts Grouped by Taxonomy Terms in Bricks using BricksExtras’ Dynamic Table and Pro Tabs

Posts Grouped by Taxonomy Terms in Bricks using BricksExtras’ Dynamic Table and Pro Tabs

How to output any post type, with the taxonomy terms as Tab titles and posts inside tables with sortable columns.
Pro
Category Grid with ACF Images in Bricks

Category Grid with ACF Images in Bricks

Creating a grid of post categories, each category card showing an image from an ACF field, category name & description.
Categories:
How to conditionally load your scripts based on an ACF field

How to conditionally load your scripts based on an ACF field

This tutorial provides the PHP codes that can be pasted in order to enqueue your scripts conditionally based on the value of an ACF field…
Categories: