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 630 Bricks code tutorials with BricksLabs Pro

Related Tutorials..

Pro
Hierarchical Posts with Nested Query Loops in Bricks

Hierarchical Posts with Nested Query Loops in Bricks

Learn how to set up nested query loops in Bricks to show hierarchical posts with child posts grouped under their corresponding parent posts
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:
Loop Item ID and Loop Item Object in Bricks

Loop Item ID and Loop Item Object in Bricks

If you are working on a Bricks site with specific requirements, chances are you need to grab the ID and/or object of the current item…
Categories:
Pro
Parent post Bricks query loop

Parent post Bricks query loop

Updated on 5 Feb 2024 In the BricksLabs Facebook group a user asks: Is there a way to output the data of a parent post…
Categories:
Pro
Querying Posts by Date/Datetime Custom Fields in Bricks

Querying Posts by Date/Datetime Custom Fields in Bricks

This Pro tutorial shows how to configure ACF and Meta Box to query posts in Bricks by custom field(s) of the type Date/Date Time Picker…
Categories:
Tags: