YouTube Video Timestamps in Bricks – Pulse Of The Blogosphere

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:

// Function to get the loop index.
function bl_get_loop_index() {
	if ( method_exists( 'BricksQuery', 'get_query_object' ) ) {
		$query_object = BricksQuery::get_query_object();

		if ( $query_object ) {
			$value = intval( $query_object::get_loop_index() ) + 1;
		}
	} else {
		$value = 0;
	}

	$value = isset( $value ) ? $value : 0;

	return $value;
}

// Function to convert time to seconds.
function bl_convert_to_seconds( $time ) {
	$time = explode( ':', $time );

	$seconds = 0;

	if ( count( $time ) === 2 ) {
		// if time is in the mm:ss format
		$seconds = $time[0] * 60 + $time[1];
	} else if ( count( $time ) === 3 ) {
		// if time is in the hh:mm:ss format
		$seconds = $time[0] * 3600 + $time[1] * 60 + $time[2];
	}

	return $seconds;
}

// Function to get the YouTube embed link at the timestamp.
function bl_yt_embed_link_at_timestamp() {
	return sprintf(
		'https://www.youtube-nocookie.com/embed/%s?autoplay=1&start=%s',
		get_field( 'video_id' ),
		bl_convert_to_seconds( BricksQuery::get_loop_object()['timestamp'] )
	);
}

Meta Box

Meta Box users: Replace

get_field( 'video_id' ),

with

rwmb_meta( 'video_id' ),

Step 4

Edit the template that applies to the post type or a specific Page in question for which the field group has been created with Bricks.

Note: JSON export of the entire Section has been provided near the end for your convenience if you want to get a quick-start by copying and pasting.

Manual setup instructions:

Add a Section and for its Container, set Row gap of 2em.

Add a Code element inside the Container having:

<div class="responsive-container"><iframe id="ytplayer" type="text/html" width="640" height="360" src="https://www.youtube-nocookie.com/embed/<?php the_field( 'video_id' ); ?>" frameborder="0"></iframe></div>

Meta Box

In the above code replace

the_field( 'video_id' );

with

rwmb_meta( 'video_id' );

Toggle “Execute code” on.

Settings (gear icon) → PAGE SETTINGS → CUSTOM CODE → Custom CSS:

.responsive-container {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 0px;
	height: 0;
	overflow: hidden;
}

.responsive-container iframe,
.responsive-container object,
.responsive-container embed,
.responsive-container video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

The above CSS ensures that the YouTube video (all iframes on this page/template actually) take up the full width of the parent and are responsive.

Add a Container below the Code element.

Row gap: 0.5em

Add a Block inside the Container.

Add a class of timestamps__timestamp

Toggle “Use query loop” on.

Click the Query icon and select your ACF Repeater i.e., “ACF Repeater: Timestamps”.

Cursor: pointer

Border radius: 4 on all sides

Click on States (pseudo-classes) icon, select :hover state and set the Background color to #f5f5f5.

Switch back to normal state.

CSS:

root[data-active] {
	background-color: #f5f5f5;
}

We are going to later use Bricks’ Interactions feature to assign a data attribute called data-active to the loop div that is clicked (after removing it first from all the loop divs). The above CSS ensures that a light gray background color applies for the active loop item.

Add an attribute named data-ts-index having this value:

{echo:bl_get_loop_index}

to add data-ts-index="1", data-ts-index="2", data-ts-index="3" etc. data attributes to the loop items on the front end. This is needed when setting up interactions on the Basic Text element later to be able to add the data-active attribute to the loop item that is the parent of the clicked Basic Text element.

Add a Basic Text element inside the Block having this content: