HTML embed loads only in 1st item in collection

Hi! On the Audio page I have a collection list with an audio player code inside HTML embed. For some weird reason it only loads the very first instance of the player.

And second odd bug: on the video template page there is a collection list which I set to gird, and it skips the first grid item, leaving it empty for no obvious reason.

Thanks in advance!

Love Webflow :webflow_heart:

Here is my site Read-Only: LINK
Published site: LINK

The first issue more than likely has to do with you using an id to target the audio player, as now you actually have multiple instances of elements using the same id:


Since I can’t verify any changes to the custom code without being able to publish it, it’s going to be hard for me to troubleshoot and see if there is an easy solution. My first thought is to change the code above to class="plyrio" instead of id="plyrio" and then modify the following code to read as '.plyrio' instead of '#plyrio' (as id’s need to be unique, while classes don’t):


I doubt the solution is that simple since I’m guessing the javascript needs a unique id, but it may point you in the direction of a valid solution.

In regards to the video grid issue, I recorded a quick video illustrating how you can go about fixing that problem:

1 Like

Thanks a lot Mike!!!

So detailed and super helpful! The grid issue was very easy and I totally missed it haha :slight_smile:

And regarding the audio player , your comments made me look into the script of the audio player and I discovered that using const player = Plyr.setup('.plyrio', { controls }); instead of const player = New Plyr('.plyrio', { controls }); fixed the issue and it works either with id or class.

Thanks! Both problems fixed.

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.