How to use Vimeo Player API with Finsweet Cookie Consent Component?

Finsweet Components
1

Hi everyone :waving_hand:

I’m currently integrating the Finsweet Cookie Consent Component to block Vimeo videos until the user accepts the appropriate cookie category.

I followed the standard setup:

  • Added the fs-consent-categories attribute to the iframe

  • Replaced the src attribute with fs-consent-src

The blocking works perfectly so far – but I’m running into issues with the Vimeo Player API.
My embedded videos use the Vimeo API to control playback, but since the src is initially removed and only re-applied after consent, the Vimeo Player can’t be initialized (because it depends on the src being present).

Here’s my current code:

<!-- Video Player Functions -->
<script src="https://player.vimeo.com/api/player.js"></script>
<script>
// VIMEO VIDEO PLAYER
$("[js-vimeo-element='component']").each(function (index) {
  let componentEl = $(this),
    iframeEl = $(this).find("iframe"),
    coverEl = $(this).find("[js-vimeo-element='cover']");

  // create player
  let player = new Vimeo.Player(iframeEl[0]);

  // when video starts playing
  player.on("play", function () {

    // pause previously playing component before playing new one
    let playingCover = $("[js-vimeo-element='component'].is-playing").not(componentEl).find(" [js-vimeo-element='cover']");
    if (playingCover.length) playingCover[0].click();

    // add class of is-playing to this component
    componentEl.addClass("is-playing");

  });

  // when video pauses or ends
  player.on("pause", function () {
    componentEl.removeClass("is-playing");
  });

  // when user clicks on our cover
  coverEl.on("click", function () {
    if (componentEl.hasClass("is-playing")) {
      player.pause();
    } else {
      player.play();
    }
  });
});
</script>

My question:
How can I delay the Vimeo Player initialization until the user has accepted the cookie category and the src attribute is restored?

Is there a callback or event I can hook into when consent is granted and the iframe is “reactivated”? Or do I need to check manually if the src is present before initializing the player?

Any advice or best practices would be super helpful! :raising_hands:

Thanks a lot in advance!
Christian

2

Hey @juicydisorder!

You can use the Consent API function to run code after a user has accepted or denied cookies. The snippet below listens to the updateconsents event, which fires everytime the user accepts or modifies the consent given.

<script>
  window.fsComponents = window.fsComponents || [];
  window.fsComponents.push([
    'consent',
    (instance) => {
      console.log('Consent instance:', instance);

      instance?.consentController?.on('updateconsents', (data) => {
        console.log('Consents and consent modes updated: ', data);
      });
    },
  ]);
</script>

Inside the data, you can find which consent categories the user has approved and denied, which you can use to conditionally run code.

Let us know if you run into any issues! @Support-Luis or @Support-Pedro can help with any custom code solutions you might need.

3

Thanks a lot @Support-Finn :raising_hands: That makes total sense — I’ll give it a try!

By the way, is there an official documentation page for the Consent API yet? Would be super helpful to see all available methods, events, and data structures in one place.

4

Hey @juicydisorder! No public documentation just yet. We are working on it!

1 Like