I would like to add a preload=“auto” attribute to my video component to let the browser know it’s top priority. How would I be able to achieve that using builder?
I tried using HTML Attributes but that one attaches those attributes to the div container, not the video component itself.
Any ideas?
Thanks
Hi @RonHagafny,
We hope you’re doing well!
I tried too but it seems using HTML attributes, it adding the property to the parent div instead video element. So to workaround this you can use Custom JS, for example:-
let videos = document.getElementsByClassName('builder-video');
//Set attribute only to the first video in a page
videos[0].setAttribute("preload", "auto");
//or
//Set attribute to all videos in the page
for(let i=0; i < allVideos.length; i++){
videos[i].setAttribute("preload", "auto");
}
Let us know if you’ve further questions!
I have no doubt that’ll work , but if we are waiting for Javascript to work until the attribute is added dynamically, doesn’t that defeat the purpose?
It wouldn’t give me the same performance optimization as i’d get if the HTMl was already statically rendered with the preload=“auto” tag already set
@RonHagafny, Indeed- I agree with you. I’ll discuss with our internal team to register this as feedback or if anyone has a better solution over this!
Thanks Garima for the quick feedback.
One of the reasons that I chose Builder was because I eventually want the best experience in building static landing pages. Eventually, if Builder is blocking me from executing what I need (I.E: preload=‘auto’ on videos), than I’d need to revert to building my pages with code and no one wants that.
In my opinion, Adding a new advanced setting for the video component that allows us to choose the wanted preload method should be very valuable (Also, I don’t work at Builder, but tech wise it seems like a very short task to build)
BTW: The same goes for the “lazy” property in your Image component. As far as I know, Builder decides it automatically adds it as lazy, but what if I don’t want it to be?
Same thing, but video is of bigger concern.
Thanks 
@RonHagafny, encourage you to submit a feature request (to add a toggle for lazy property for the image component too in advance settings same as in the video) here Builder.io Ideas.
As a workaround, you can open the JSON view of the image and set the lazy value as false if you don’t want it to be:-
The space-wise setting of lazy loading can be done from Account Settings>Advanced settings>Performance:-
Hey,
In my website, my has lazy: “false”, and yet it is lazily loaded. It’s obviously above the fold. What’s going on?
@RonHagafny, Did you manually set lazy: false from JSON or space-wise setting? Also please share the website link with us so I can investigate.
I manually set lazy:false from JSON. I didn’t touch space-wise setting because it’s set to the recommended settings of only lazy loading images that are not above the fold. Hero image is above the fold
Attached are 2 images. One from builder and one from actual homepage.
Our homepage is www.easyplant.com (We mainly care for out mobile version but it happens in both Mobile and Desktop)
@RonHagafny thank you for further details on this, I’ve tested this on my testing space and it seems bug from our end. I’ll check with the team for a fix and keep you posted!
