How to embed Spotify using ACF?

How To
1

Hey there, first time posting so apologies if I’ve missed anything here.

Here’s my challenge that I hope someone can help with:

  • I have an ACF custom post type “Episodes”
  • I have an ACF field group “spotify_embed” (type: URL)
  • I want to embed the spotify player into these post types

So far I’ve tried setting this up as a URL type and adding it as a code block, replacing the source with this variable:

<iframe style="border-radius:12px" src="{acf_spotify_embed}" width="100%" height="152" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>

This doesn’t work. Has anyone achieved something similar? I can’t be the only one here trying to do this…
Also my PHP skills are non-existent, so would appreciate as much context as possible.

Thank you!

2

Okay so after some trial and error, and putting together some bits and pieces from other forum posts, I’ve figured it out:

  1. Create a custom field of type text - this will be where you put your unique Spotify ID from the embed code
  2. Attach that field to an existing or new post type (custom, or standard Posts)
  3. In Bricks, add an HTML element
  4. Insert the full Spotify embed code, and wrap that in a styled DIV (styled to your liking). In place of the unique ID, enter your ACF field type created in step 1.
  5. Enable the code and sign it
  6. Save, test, rejoice!

What that looks like for me is this:
<div style="left: 0; width: 100%; height: 80px; position: relative;"><iframe style="border-radius:12px" src="https://open.spotify.com/embed/episode/{acf_spotify_embed_code}?utm_source=generator" width="100%" height="152" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe></iframe></div>

There’s probably some trimming of that DIV code that can happen, but I’ll test that later.

I hope this can help others who are stuck as well, because I couldn’t find a single demo of this anywhere, and I know how frustrating it can be to have an idea but not understand how to implement it!