I need help cleaning up this code. Adding aspect ratio to it

asasass · January 16, 2024, 11:02am

No js is is being used on here.

 html,
 body {
   height: 100%;
   margin: 15px;
   padding: 0;
 }

 /*
.container {
  position: absolute;
  left: 0;
  right: 0;
  min-height: 100%;
  display: flex;
}

.curtain {
  flex: 1 0 0;
  margin: auto;
  max-width: 640px;
  position: relative;

}

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

.video-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
*/

 .video-container {
   display: flex;
   flex-direction: column;
   align-items: center;
 }

 .video-container iframe {
   width: 100%;
   max-width: 640px;
   height: calc(349px * (640 / 640));
   margin-bottom: 15px;
 }

<div class="video-container">
        <iframe src="https://www.youtube.com/embed/?si=DVvr9hTwApmGRZwf" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
        <iframe src="https://www.youtube.com/embed/?si=DVvr9hTwApmGRZwf" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
        <iframe src="https://www.youtube.com/embed/?si=DVvr9hTwApmGRZwf" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
        <iframe src="https://www.youtube.com/embed/?si=DVvr9hTwApmGRZwf" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
        <iframe src="https://www.youtube.com/embed/?si=DVvr9hTwApmGRZwf" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
    </div>

m_hutley · January 16, 2024, 11:12am

so…uhh… is there a reason you’re putting the same video in the page 5 times back to back?

asasass · January 16, 2024, 11:13am

Used as an example.

m_hutley · January 16, 2024, 11:13am

Then what are you asking us to clean up, if you’re giving us ‘example’ code?

asasass · January 16, 2024, 11:14am

the aspect ratio part, when the screen gets bigger and smaller.

m_hutley · January 16, 2024, 11:16am

I… am going to be honest, the words ‘aspect’ nor ‘ratio’ appear anywhere in your code. So I have no idea what you’re trying to add an aspect ratio to, what you want the aspect ratio to be…

Like… you’ve just sort of walked into the store and said “I want to buy stuff”…okay…

mathewps · January 16, 2024, 11:18am

To clean up your code and add an aspect ratio, you’ll want to focus on a few key areas.

html, body {
  height: 100%;
  margin: 15px;
  padding: 0;
}

.video-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%; /* Ensures the container takes the full width */
}

.video-container iframe {
  width: 100%; /* Takes the full width of the container */
  max-width: 640px; /* Maximum width */
  aspect-ratio: 16 / 9; /* Sets the aspect ratio to 16:9 */
  margin-bottom: 15px; /* Spacing between videos */
}

<div class="video-container">
  <iframe src="https://www.youtube.com/embed/DVvr9hTwApmGRZwf" title="YouTube video player" frameborder="0" allowfullscreen></iframe>
  <!-- Repeat the iframe as needed -->
</div>

PaulOB · January 16, 2024, 12:43pm

So your html is 100% tall and has 15px margins making it 100% + 30px tall which is then already taller than the viewport. Inside this you put the body element at 100% + 30px tall so is already too large for the html element and also overflows.

Your first element will be 30px away from the top and sides due to the double margins.

That whole rule is nonsense.

You have about a million posts showing how to create an aspect ratio so it should be possible for you to work this out now.

There’s the old fashioned padding hack or the current aspect-ratio property as shown in the above (AI) post.

asasass · January 16, 2024, 12:45pm

How would I use padding-top:56.25; instead of aspect-ratio: 16 / 9; ?

That has me stuck there.

It doesn’t seem to work with 5 videos on the screen.

PaulOB · January 16, 2024, 1:02pm

Why do you need to? Aspect ratio is fully supported now.

asasass · January 16, 2024, 1:04pm

How would it be written though?

AI wasn’t able to figure that out. https://jsfiddle.net/zrgsac89/3/

From AI:

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.video-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%; /* Ensures the container takes the full width */
  margin-top: 15px;
}

.video-container iframe {
  width: 100%; /* Takes the full width of the container */
  max-width: 640px; /* Maximum width */
  /* aspect-ratio: 16 / 9; */ /* Commented out the aspect-ratio property */
  padding-top: 56.25%; /* Sets the aspect ratio to 16:9 using padding-top */
  margin-bottom: 15px; /* Spacing between videos */
}

DaveMaxwell · January 16, 2024, 1:33pm

Use the appropriate controls when appropriate. Use gap instead of margins whenever using flex or grid. Get rid of all the extraneous margins and paddings and the ratio sets right.

.video-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%; /* Ensures the container takes the full width */
  gap: 15px;
}

.video-container iframe {
  width: 100%; /* Takes the full width of the container */
  max-width: 640px; /* Maximum width */
  aspect-ratio: 16 / 9; 
}

asasass · January 16, 2024, 1:49pm

My question was,

How would I use padding-top:56.25; instead of aspect-ratio: 16 / 9;

DaveMaxwell · January 16, 2024, 2:04pm

You don’t. One (the right way) controls the object itself, and the other is trying to apply external forces in some unnecessary and incorrect manner. Do it the right way…

asasass · January 16, 2024, 2:09pm

How would it have been written before aspect-ratio was invented?

asasass · January 16, 2024, 2:23pm

This code here: https://jsfiddle.net/euv5jwos/

How would I get padding-top: 56.25%; to work in the code?

I am assuming the rest of the css is fine.

The only thing not working is the videos not being responsive.

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

/*
.video-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
*/

.container {
  position: absolute;
  left: 0;
  right: 0;
  min-height: 100%;
  display: flex;
  margin-top: 15px;
}

.video-wrapper {
  flex: 1 0 0;
  margin: auto;
  max-width: 642px;
  position: relative;
}

/*.ratio-keeper {
  height: 0;
  padding-top: 56.25%;
  overflow: hidden;
  position: relative;
}*/

<div class="container">
  <div class="video-wrapper">
    <div class="ratio-keeper">
      <div id="ytplayer0" class="video-frame"></div>
      <div id="ytplayer1" class="video-frame"></div>
      <div id="ytplayer2" class="video-frame"></div>
      <div id="ytplayer3" class="video-frame"></div>
      <div id="ytplayer4" class="video-frame"></div>
    </div>
  </div>
</div>

PaulOB · January 16, 2024, 2:27pm

You need to do it as you did it before and wrap each video in a wrapper.

asasass · January 16, 2024, 2:29pm

Will what you did there work in here?

https://jsfiddle.net/nex56u0j/1/

Would more adjustments need to be made?

I am having some difficulty making the proper adjustments to this one.

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

/*
.video-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
*/

.container {
  position: absolute;
  left: 0;
  right: 0;
  min-height: 100%;
  display: flex;
  margin-top: 15px;
}

.video-wrapper {
  flex: 1 0 0;
  margin: auto;
  max-width: 642px;
  position: relative;
}

/*.ratio-keeper {
  height: 0;
  padding-top: 56.25%;
  overflow: hidden;
  position: relative;
}*/

<div class="container">
  <div class="video-wrapper">
    <div class="ratio-keeper">
      <div id="ytplayer0" class="video-frame"></div>
      <div id="ytplayer1" class="video-frame"></div>
      <div id="ytplayer2" class="video-frame"></div>
      <div id="ytplayer3" class="video-frame"></div>
      <div id="ytplayer4" class="video-frame"></div>
    </div>
  </div>
</div>

PaulOB · January 16, 2024, 2:46pm

The video-frame element would need to be the ratio-keeper and then you absolutely place the Iframe on top of each ratio-keeper.

asasass · January 16, 2024, 2:56pm

What did I do wrong? https://jsfiddle.net/je9uqa1k/

<div class="container">
  <div class="video-wrapper">
    <div class="">
      <div class="video-frame">
        <div id="ytplayer0" class="ratio-keeper"></div>
      </div>
      <div class="video-frame">
        <div id="ytplayer1" class="ratio-keeper"></div>
      </div>
      <div class="video-frame">
        <div id="ytplayer2" class="ratio-keeper"></div>
      </div>
      <div class="video-frame">
        <div id="ytplayer3" class="ratio-keeper"></div>
      </div>
      <div class="video-frame">
        <div id="ytplayer4" class="ratio-keeper"></div>
      </div>
    </div>
  </div>
</div>