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.

1 Like

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: