How to embed or link Youtube videos into a Slider element

Design help General
1

Hello, is there a way to embed a Youtube video into a slider element to clean up the UX/UI?

Currently I’m using a widget from another platform to create a video slider, but I was wondering if I could add YouTube URLs to the Webflow slider element?

Thank you kindly in advance.

Photo + Video Slider
Photo + Video Slider1438×1676 436 KB

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

image
image936×762 138 KB

please use this and add it to the slider and just set the URL of your YouTube video.

3

@Dawood_Hassan - the mask prevents me to adding an element to the slider.

4

@Dbisbee

image
image1652×586 69.1 KB

please add into the slide.

1 Like
5

Thank you! This works so perfectly!

6

I have my Youtube videos embedded into my slider successfully, using Webflow YouTube widgets inside my slides.

Problem is that the videos overflow the slider frame vertically, so they plays fine, but I cannot see the full video frame. This is especially bad for a video that is in portrait aspect ratio.

How can I make the video component load so it scales to fit into the frame?

It might be harder because my video sources include normal YouTube video and YouTube Shorts video, which I managed to make appear by customing the URL, so I have some video in landscape aspect ratio, and some in portrait aspect ratio.

Ideally, I want them all to load into a slider that does not change height, but each video should scale to fit the vertical height of my Webflow slider, and leave space on either side to accommodate.

Is there a way to achieve that?

7

Hey Richard,

This is the exact problem I had. I didn’t find a solution other than changing my design to only show one video instead of a slider.

You can try

  1. Common Ninja’s video slider widget. Video Carousel integration for Webflow - Free & Easy to Use
    My result: I had the same problem with the video still not fitting in the frame.
  2. Vidzflow https://www.vidzflow.com/
    My result: I haven’t used them, but building a video carousel might be something the team would be open to from a customer request.

Let me know how it goes for you!

8

Hey

You can definitely embed YouTube contents into a Webflow slider, but getting them to play nicely with different aspect ratios (like Shorts vs normal vids) is where things get tricky.

Webflow’s native visual elements don’t always scale well, especially in sliders. One workaround is using CSS to force aspect-ratio constraints, but it’s tough when you’re mixing portrait and landscape visuals.

If you’re open to using a widget, there’s a free one from Elfsight - a YouTube Slider (a template of our YouTube Gallery widget) that handles this exact use case. It’s mobile-optimized, scales inside containers (so no overflow), and works great with both regular vids and Shorts. You just paste in your channel or links, choose a layout (like horizontal scroll or grid), and embed it into your Webflow page via iframe. It keeps a fixed height and adjusts content inside.

Other options include:

  • Embedding content manually and wrapping them in a responsive container with object-fit: contain;

  • Using Swiper.js (which Webflow supports via custom code) to create a custom slider with visual embeds and better control.

Hope that helps! Our support team will help you with any issues so don’t hesitate to reach out if something feels off with scaling.

Cheers,

Elfsight Team