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";
- Is this coding only setting the value? how can i get the value for the right name for the script: ‘data-src’.
- 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:
The div attribute for ‘ytdefer’ (value is the end of a youtube url):
The setup in the navigator:
The fields in the collection list:
