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: