Custom code breaks when integrated into Webflow

Hi there,

I’ve used an outside developer who’s created a custom built carousel feature for our site, but I’m currently having some issues trying to integrate it into my Webflow project.

I’ve uploaded all of the developer’s files straight onto our FTP and tried it out there – and it works perfectly.

However, when I try to drop the code into the Webflow HTML embed, it loses some functionality:

  • The background videos won’t load on the home page.
  • The proper fonts won’t load, and it removes the correct font from the Webflow navbar.
  • The spacing between the item is different

I believe I’ve updated all the paths to go to the corresponding place on our FTP but it just won’t work correctly.

The strange thing is that all of the background videos load properly on the Published Webflow Talent page, but zero videos load on the Published Webflow Home page.

Here is what the pages are supposed to look like:

I feel like there’s some CSS breakdown somewhere – but I don’t have much experience in the custom code department, so it might be something simple I am overlooking. I’ve reached out to the developer to see if he can figure out what’s wrong as well - but he’s never worked with Webflow in the past, so I figured I’d check with the real experts first! :wink:

Thank you in advance!!


To be honest not a single one of your links shows the videos for me. Can you provide a screen recording of what we should be seeing?

@dram - That’s strange. On the talent page, the videos should show up when you hover a person’s name. On the home page, a video should automatically play in the background.

Ah, it’s just the preload isn’t enabled and you have to wait for video to load after hovering (which is actually bad - the videos are pretty large and someone may never see them after briefly traveling their pointer over the names. You would be better off preloading every video right after page load - ask our developer about this).

Here is webflow version. So it works but the hover is wonky because the names are too close to each other resulting in overlap.

1 Like

@dram - thanks for your responses! I’ll definitely ask the developer about this!

The videos seem to load (albeit slow…) on the TALENT page. Any ideas on why they aren’t working one the HOME page?

Do you have any clue why the fonts/CSS on the Webflow version stops working?
As you can see in the goodpost.tv example in the image below, the names aren’t overlapping. But in the webflow example, the font is different and all the names are overlapping each other.

seems like the code isn’t created correctly. I see a lot of errors in the console:

CloudApp

You can modify font weight, line height and letter spacing the way you want in your html embed style. Currently font settings are simply different.

edit: not in the html embed but in this elements’ style settings. Just clarifying.

@PixelGeek – Thank you for your reply! I peeped the console on the “working” site at goodpost.tv and I don’t seem to get any errors at all, but I obviously see the errors you pointed out in the Webflow version.

Any clue on the reason behind this? The developer mentioned he’s working in WebGL – does webflow not cooperate well with this?

PS. I enjoyed your live stream last week!!:+1:

Thanks for watching the stream. :slight_smile: Hope to see you in the live chat for tomorrow’s live stream.

As for the code errors, it looks like your developer is trying to pull code from another server, but the original server, where the original code is, is not allowing it due to security reasons:

CloudApp

Hope this helps

1 Like

Your website’s video player has CORS related problems, it seems.

My debugger console is getting hammered by similar messages reported above. You’ll either need to have your video assets website loosen up the rules on the Access-Control-Allow-Origin header (a function of the web server software), or you’ll need to upload the videos and other assets to Webflow CMS and point to them through there.

HTH.

1 Like