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..

Bricks Templates Query Loop

Bricks Templates Query Loop

How display Bricks Templates with saved screenshots in a query loop.
Categories:
Pro
Alternating Posts from Two Post Types in Bricks

Alternating Posts from Two Post Types in Bricks

How to output posts from two seperate post types, alternating in a query loop.
Categories:
Pro
Post Titles and Post Content Tabs in Bricks

Post Titles and Post Content Tabs in Bricks

How to set up Nestable tabs with post titles as the tab menu, and post content and/or any other post-specific data as the tab content.
Categories:
Pro
Adjacent Posts Bricks Query Loop

Adjacent Posts Bricks Query Loop

This Pro tutorial provides the steps to customize a posts query loop in Bricks to show previous and next posts on single post pages. The…
Categories:
How to create parallax effects using Rellax.js in Bricks

How to create parallax effects using Rellax.js in Bricks

This tutorial provides the JS & PHP codes that can be pasted in order to create smooth parallax effects using the Rellax.js library inside Bricks…
Categories:
Pro
Update Post Meta From Another Custom Field’s Value on Post Publish/Update when using Meta Box

Update Post Meta From Another Custom Field’s Value on Post Publish/Update when using Meta Box

In the Meta Box Facebook group a user asks: Hi all, wondering if I can get some help. For custom field 1, I am using…
Categories:
Tags:
Pro
Outputting an Element in Bricks x times where x is a custom field value

Outputting an Element in Bricks x times where x is a custom field value

Learn how to output a query loop item(s) as many times as the value of a custom field in Bricks.
Categories:
Pro
Meta Box Related Project’s Featured Image URL on Single Reviews

Meta Box Related Project’s Featured Image URL on Single Reviews

Updated on 26 Jun 2025 In a recent website I worked on, a requirement was to get the URL of the featured image of a…
Pro
ACF Term Meta on Single Posts in Bricks

ACF Term Meta on Single Posts in Bricks

Consider this scenario: CPT: Project Custom taxonomy: Project Type Each project will be assigned only one project type. Project Type taxonomy's custom field: Project Type…
Categories: