How to have code work with ratio-keeper removed

Here is the code working with .ratio-keeper removed. https://jsfiddle.net/sdw0ocgm/

In my full code I removed .ratio-keeper here: https://jsfiddle.net/820f5ns6/

Full code before .ratio-keeper was removed: https://jsfiddle.net/3xr1epwd/

What I did:

I replaced .ratio-keeper with .embed-youtube

.embed-youtube {
  position: relative;
  height: 0;
  padding-top: 56.25%;
  margin: auto;
  overflow: hidden;
}

Two issues came up:

The exit button is no longer attached to the curtain.

The 2nd issue is, .slide is not working in the code.

When the play button is clicked, nothing happens in the code.


It should look like this:

You can’t just move stuff around and expect it to work without changing everything that goes with it :slight_smile: .

First of all .slide class is added to the container which is above the curtain element which means the CSS rule needs to be changed as follows.

.slide .curtain1 .video-one {
  transform: translateY(calc(-100% - 1px));
}

The video is there but is is hidden because it is nmow below all the other stuff in that div. You will need to position it at the top left.

.embed-youtube-play.playgreen::before {
  border-left-color: green;
}
.embed-youtube iframe{
  top:0;
  left:0;
}

Thirdly the exit button is no longer in the same context and needs to be moved up a level.


      <button class="playa playgreen  embed-youtube-play" type="button" aria-label="Open"></button>
    </div>
  <button class="exit" type="button" aria-label="Open"></button>
 </div>
</div>
1 Like

Video isn’t appearing and I have this: https://jsfiddle.net/msgpjr0k/3/

Also, where is overflow: hidden supposed to go?

.embed-youtube iframe {
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

Fixed the overflow issue by moving the .video-one down. https://jsfiddle.net/5o64vp2x/

Video still not showing.

    <div class="wrap embed-youtube ">
      <div class="video embed-youtube  " data-id="djV11Xbc914">
      </div>
      <div class="video-one"></div>
      <button class="playa playgreen  embed-youtube-play" type="button" aria-label="Open"></button>
    </div>
    <button class="exit" type="button" aria-label="Open"></button>
  </div>
</div>

It’s not going to work now that you removed the ratio keeper.

You need the whole thing to be working from here as before.

  <div class="curtain1">
    <div class="ratio-keeper">

You could change ratio-keeper to say embed-youtube but the structure must remain the same.

The fan and all your effects are constructed within the ratio keeper and that’s what holds it all together.

The video is actually now down here out of sight because of the overflow:hidden.

You went through about 10,000 posts to come up with the ratio-keeper so it’s one thing you should not mess with. :wink:

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