Opens in a new tab
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 633 Bricks code tutorials with BricksLabs Pro

Related Tutorials..

Pro
Related Services grouped by Service Categories on Single Branch Posts in Bricks

Related Services grouped by Service Categories on Single Branch Posts in Bricks

How to query ACF relationship fields on single CPT templates.
Categories:
Pro
ACPT Gallery Field Query Loop in Bricks

ACPT Gallery Field Query Loop in Bricks

How we can output images from ACPT‘s Gallery field for posts as a grid using a query loop.
Categories:
Accessing ACF Repeater Sub Fields Programmatically in Bricks Query Loop

Accessing ACF Repeater Sub Fields Programmatically in Bricks Query Loop

It is possible to output sub field's values when a Bricks query loop's type has been set to a ACF Repeater without writing code. This…
Categories:
Pro
Parent Query Loop Object – Traversing Nested Query Loops Up in Bricks

Parent Query Loop Object – Traversing Nested Query Loops Up in Bricks

Bricks enables us to build nested query levels of unlimited levels. Here are a couple of examples: Sometimes, you might want to obtain the parent…
Categories:
Pro
Nested Meta Box Query Loop Inside a CPT Query Loop in Bricks

Nested Meta Box Query Loop Inside a CPT Query Loop in Bricks

This Pro tutorial provides the steps for setting up a cloneable Meta Box group query inside a CPT query in Bricks. Scenario: CPT: course Meta…
Categories:
Pro
How to Update Custom Fields with Default Values For Existing Posts when using ACF

How to Update Custom Fields with Default Values For Existing Posts when using ACF

Let's take a scenario where there are 10 Pages in a WordPress site. You proceed to create a Text-type of custom field called, say, "Custom…
Categories:
Tags: