positioning iframe in flickity cell responsively

[spacecat]

I'm trying to add a youtube embed (iframe) video to one of the cells in my flickity slider and position it responsively.

I am aware of the issue #199 where you can't swipe when the cell you're trying to swipe is the iframe one.

Also I've tried the Bootstrap 3 responsive classes and the FluidVids plugin as suggested in this post on stackoverflow to position the video but I can't get it to align responsively inside the cell.

Working on a codepen example to post here but in the meantime I'm interested in knowing if this would be possible at all with some HTML/JavaScript/CSS wizardry?

[desandro]

Thank you for this issue. I would look into sizing and styling the YouTube embed without Flickity first, to first see if its possible. Then, if it's looking good, try enabling Flickity after. As this is a CSS issue outside Flickity, I'll leave that up to you

[spacecat]

Hi and thank you for the reply. I've now created two pens. The first one is a simple responsive iframe (YouTube video) using this technique from Smashing Magazine which works great. The second is the attempt with Flickity. I have been playing around with the CSS but without any success, the iframe won't even appear when inside of the gallery-cell. Got any ideas how to make it work?

[desandro]

Thanks for that. I believe you need to set width: 100% for the video-container to have height set from padding-bottom. See demo.

Also take a look at this demo which disables setGalleryHeight and uses the same padding-bottom hack.

[spacecat]

It looks like the padding-bottom hack isn't going to work.

The problem with the padding-bottom hack is that it doesn't take vertical resizing into account. It works fine when resizing horizontally. But as soon as you resize the windows vertically and the window size becomes smaller than the height of the video, it gets "cropped" and scrollbars appear.

The requirement I need to satisfy is as follows: No matter what dimensions of the gallery-cell, the entire YouTube video window including the chrome should be visible at all times, plus it should maintain its aspect ratio.

I know in flickity there are some functionality that don't work when resizing the window and you have to press F5 (refresh) for the slider to refresh itself in order to reposition all the elements. This behavior would be fine for the iframe/YouTube problem.

Tried different CSS techniques. The padding-bottom hack, various calc() techniques, min-aspect-ratio and max-aspect-ratio media querys but none of them work.

I've seen some javascript techniques where calculations are being made for resizing the iframe on resize event but I'm not sure if javascript is the way to go.

Could it be that what I'm trying to do is not possible using only CSS?

Do you think it's possible with javascript?

[desandro]

Sorry, but I won't be able to find a solution. Again, I think the best way to resolve this is to create a solution that works without Flickity, then add Flickity when you get it working.

[memes-christian]

1.) Make your video responsive using this generator: http://embedresponsively.com/ 2.) Set container width to x%, 3.) Set .carousel-cell to .carousel-cell { width:inherit; }

This worked for me.

[DenisFernandes]

2019: I made my iframe inside flickity responsive just by setting width:100%; height:100%