Streaming live at 10am (PST)

CMS - Need to set name and value of a div attribute from list item

Hi, ill try to keep this short. i have a page with a lot of video players and using the webflow player or youtube embed is way too heavy and slow. i found a great solution here on the forums using ytdefer which is super fast and very light to load.

it worked great when i first had everything set up manually (duplicating the ytdefer div and changing the value for each one), but needed to change my design to pull everything from a CMS collection.

TLDR; The problem is that the script (from the body tag) is pulling the end of the video url from a div’s custom attribute name and value, and when in a collection the same video url is being duplicated the same for all videos. so i need to be able to have the div’s attribute value set from a text field i have in the collection item.

I have seen a few things around to set a value of and attribute, but i can’t seem to get it to work.
I am presuming i will need to put this into an HTML Embed within each CMS item.

var itemAtt = document.createAttribute("ytdefer");
itemAtt .value = "url for ytdefer";
  1. Is this coding only setting the value? how can i get the value for the right name for the script: ‘data-src’.
  2. will something like this be able to change dynamically for every item in the CMS?

EDIT: i have set up an example site of what i am doing:
Staging site:https://ytdefer-cms.webflow.io/
Webflow Project: https://preview.webflow.com/preview/ytdefer-cms

I hope i have provided the relevant data (plus pictures below) to make my problem clear. i’ll appreciate any insight or tips. Thanks!

The script in the body tag:
image

The div attribute for ‘ytdefer’ (value is the end of a youtube url):
image

The setup in the navigator:
image

The fields in the collection list:
image

Hey @medabrim
I think you should go for something like this where you actually just use html to pull attribute from CMS dinamically for diiv created through embed.

Yep that seems to have done the trick. i never though of that approach of manually creating the actual div with an html embed instead of just trying to add or alter the value of a div created from the webflow interface. well i learned something new, Thanks! :slight_smile: