How to dynamically change part of a link inside an iFrame component?

How To
1

Hi everyone,

I use Bunny.net to embed my videos and would like to create a reusable component that contains an iFrame. My goal is to dynamically change the embedded video by modifying part of the URL using a property.

Here’s the iFrame URL structure I’m working with:
https://iframe.mediadelivery.net/embed/{video_library_id}/{video_id}

Would it be possible to use a Bricks property inside a Code element to dynamically insert the video_id? For example:

Where {my_custom_property} is a dynamic property set in Bricks.

Is this the right approach, or is there a better way to achieve this? Any guidance would be greatly appreciated!

Thanks!

1 Like
2

Hi,

I’m in the same situation and tried to do that, but it seems like Bricks is stripping of some parts of the integration code when calling for dynamic data, which completely breaks the video layout…

I ended up creating a shortcode [video_bunny] to call out the integration code provided by bunny instead of using bricks code element :slight_smile:

add_shortcode('video_bunny', function($atts){
  $key = $atts['key'] ?? 'YOUR_ACF_FIELD_KEY';
  return get_field($key) ?: '';
});