Using the YouTube PFP iFrame Embed Config API in React

Implementing YouTube’s Player for Publishers Direct Integration at Condé Nast

Zac Colley
Jan 30 · 3 min read
A YouTube embed of a man holding a bottle. There is HTML code over the top of the embed.
A YouTube embed of a man holding a bottle. There is HTML code over the top of the embed.
“Try another one” — That man

What is YouTube Player for Publishers Direct Integration?

YouTube Player for Publishers is the bridge between YouTube and Google Ad Manager.

Before implementing YouTube PFP Direct Integration we relied on a set of “key-values” for targeting YouTube iFrames in Google Ad Manager. Ideally we’d use the 1-to-5 levels of “Ad Units” that serves as the basic units of inventory in Google Ad Manager. All video assets were served through one shared Ad Unit at Level 1.

This is a problem if you have different websites set up in Ad Manager. You risk targeting video adverts on the wrong website.

Amongst other benefits, implementing Direct Integration removes the need for a shared Ad Unit and allows you to use all your available Ad Unit and key-value targeting in Google Ad Manager.

The iFrame Embed Config API

YouTube has a iFrame Embed Config API. There are two ways to use this API:

  1. Using their JavaScript API
  2. Sending data through a URL parameter

You can find the details for both of these in their documentation but this post will be following 2.

Sending data through an URL parameter

YouTube are expecting a JSON object sent via an URL parameter on the iFrame:

Implementing this in React

If you’re implementing this kind of things in React you may be able to use the iFrame as shown above.

Here is a simplified component that handles this:

What about something more complicated?

But when we implemented we had the following problems:

  • We didn’t know what component will be rendering the YouTube video. We have YouTube players in our articles as well as standalone video pages.
  • We also need to send “key-value pairs” from our existing advert components.

We have an advert Context provider . This wraps most of our components in the page. This provider gives us our page level key-value pairs and Ad Unit.

What follows is a rough idea of how we’re implementing this:

  1. We call our to get relevant advert data
  2. We grab the sent through and then add the param to the URL
  3. Then we send this URL to the child function passed to the component.

This component matches the style of passing data to child components.

Is this the best way?

Well, this does work. But maybe we should be using the JavaScript API?

It seems with this solution we can get a self-contained component and not have to worry about injecting additional JavaScript alongside iFrames.

It does mean that the component is very complicated. Could the maintenance required for this component be more than implementing their JavaScript API?


Shout out to The Telegraph with the help on this, we were more than inspired by what they’ve done. Felix Amoah and the Optimisation team were invaluable in getting this implemented too.

Thanks to Dan, Dan, Nicole and Felix who reviewed and contributed to this post. 💖

Product and Engineering at Condé Nast

Tales on building digital products from the Software Engineering, Product, UX, Design and Data teams at Condé Nast. We’re hiring! 💻

Zac Colley

Written by

he/they

Product and Engineering at Condé Nast

Tales on building digital products from the Software Engineering, Product, UX, Design and Data teams at Condé Nast. We’re hiring! 💻

More From Medium

More from Product and Engineering at Condé Nast

More from Product and Engineering at Condé Nast

Speedy builds with Docker Layer Caching

More from Product and Engineering at Condé Nast

More from Product and Engineering at Condé Nast

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade