Putting Video in Carousel

Hello, How can I put a Youtube Video in my carousel on my website
to reflect the full width of the carousel?

Youtube Video

This is an example of what I want to do: http://www.blind.com/ to put the video in a
similar way.

Are you sure that you want to use the carousel on this site as the example of how yours should work? At desktop widths the display looks good, but at mobile widths it seems to have a lot of black space above and below the video. Your carousel is better in that it does not waste the vertical space at narrower widths.

Another thought that I find true for me. I do not have the patience to look at long playing sliders. I usually skip over them. It might be wiser to offer the user a link to the YouTube video rather than playing it on your site. Give the users an obvious choice. Personally, as a user, I would prefer the choice.


I’m confused. (Nothing new there.)

A carousel, such as the one on your site, displays a series of images for a few seconds each. How do you envisage a five-minute video fitting into this?

As far as I can see, the site you linked to has an embedded video, but it’s not part of a carousel.

That example does not make the video full width because when you press play you get black space to the side and as Ron said on small screen you get black space top and bottom.

The problem is that there are limited ways you can display a fixed aspect element like a video (or image). You either maintain aspect ratio by changing widths and height at the same time or you instead you overfill the area (think similar to background-size:cover) which results in some of the image possibly being outside the viewing area. This is fine for images (most of the time) but may not be suitable for videos.

To make a video always fill a container (fluid or not) you can use the technique in my pen here. It’s based on Dudley Storey’s full page video here although the technique is old anyway.

Ah I see, makes sense to give them a choice. User Experience wise it seems it would be
kinda annoying to have a autoplay video which they would probably pause it anyway. :sweat_smile:

1 Like

Well I was thinking a it being part of the slide but not autoplay.
Would you argue the same thing for others putting a video on their
website like that? I have seen it before its on plenty of sites…

But what about the example I gave above? what is that site doing? it has black
on both sides and seem to be using Vimeo.

I’ve never seen this done, and it doesn’t strike me as a great idea, even if do-able. But my thought was mainly that each frame of your carousel is shown for just a few seconds. To watch the video, you visitor would need to first realise it is a video, not just another static image, then work out how to stop the carousel (or they’ll only see a couple of seconds of the video) and then start the video. Seems very cumbersome and unintuitive to me.

alright, I see what your saying.

I’m not sure what you mean. It just has a black background with a video in the middle. If you open or close the window you see the video scale up and down but id down not fill the width and height of the container at any time.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.