Responsive height in YouTube iframe background

Question

I have small problem with parameter height of div which contain YouTube iframe (alredy responsive). Background of player is set to 636px. When I resize the window player is scaling but not the space under it.

WEBSITE: http://www.kudlatyworkshop.com/motorsport/

The css for background:

#slider_container {
position: relative;
z-index: 1;
margin-top: -131px;
height: 636px;

and for YouTube:

  .video-container {
    position: relative;
    padding-bottom: 52.25%;
    padding-top: 50px; height: 0; overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

I tried to fix it by @media tag but it not this what I'm looking for.

Thanks for any help and sorry for my english.

Kuba

score 0 · Answer 1 · answered Jul 30 '14 at 19:39

The height of the slider container never really changes. You need to specify (in each of your breakpoints) a height that looks consistent with the size of the video.

The reason you're having to specify a height at all is because the flex slider has position: absolute; (which may or may not be a requirement of the js running it) so it's rendered, but not within the document flow.

I'd say the quickest fix is either a) reconfigure your breakpoints and have more of them so the height can change more often to give a responsive appearance, or b) override absolute positioning from the .flexslider class with a .flexslider class of your own with position: static;

If the video is the only thing you're showing on this page, then you should be fine.

Responsive height in YouTube iframe background

1 Answers1