Responsive cover and video

HTML & CSS
21

Now the code looks all convoluted.

You were right.

22

No just different. :slight_smile:

The html is slimmer and makes more sense. The cover is removed altogether and I juxtaposed the ratio keeper div with the video-wrapper. All the jacket needs is itself.

I used a better aspect ratio method on the jacket which required a little extra css.

I believe its a better solution than the previous one.

2 Likes
23

With your code how do you get the play svg to shrink as the image gets smaller?
It’s staying the same size and doesn’t change.

  min-width: 40px;
  min-height: 40px;
  max-width: 120px;
  max-height: 120px;

Like it does here with the other code.

  min-width: 70px;
  min-height: 70px;
  max-width: 30%;
  max-height: 30%;

Also:

What in the javascript needs to be changed?

or you weren’t referring to the code you did?

25

I changed it in my example above but needs double checking (seems to work ok for me ).

Yes you’d need to swap the max-width and max-height back to 30% or similar. I didn’t notice it wasn’t shrinking.

26

What purpose do these serve in the code?

What is the line meant to do?

	width: 1px;
	margin-left: -1px;

.jacket::before {
	content: "";
	width: 1px;
	margin-left: -1px;
	float: left;
	height: 0;
	padding-top:100%;
        background:blue;
}

27

What exactly did you change in the javascript because I can’t figure it out.

Nothing looks different at all.

And I even used this.

28

D[quote=“asasass, post:27, topic:336174”]
What exactly did you change in the javascript because I can’t figure it out.
[/quote]
I changed the class to jacket on two places


const cover = document.querySelector(".jacket");

That’s one and I think you can find the other one yourself now. I’m on a mobile at the moment so can’t check if I did anything else.

29

You were basing the javascript off this code then.

That was one of the ones I was fiddling with.

My working code has jacket, same as yours.

That’s why it was showing me no differences.

1 Like
30

They create the aspect ratio without having to use the padding top on an extra wrapper.

A 1px float is floated to hold the div open to create the aspect ratio. It is moved out of the way to allow content to fill the space without ill effect.

The after element is used to contain the float in the usual way.

Do a search for aspect ratio on css tricks for a better explanation. :slight_smile:

31

Can I remove this ?

/*
 .jacket::after {  to clear float 
	content: "";
	display: table;
	clear: both;
} */

And add overflow:hidden; to the jacket?

.jacket {
  position:relative;
  overflow:hidden;
}

If I did that would I then change margin-left to 1px?
or how would that work?

If it stays at negative one it stays hidden.
https://jsfiddle.net/6p1cw9rh/1/

.jacket::before {
	content: "";
	width: 1px;
	margin-left: 1px;
	float: left;
	height: 0;
	padding-top:100%;
  background:blue;
}

margin-left: 1px;

32

What would padding-top on an extra wrapper look like?

How would that be written?

So I can see why this is used instead.

Right now I see no difference visually in how the code works if this is in the code, or removed from it, it still looks the same.

width: 1px;
margin-left: -1px;

Is this how you would add an extra wrapper.

Like this?

I don’t know what the padding-top number would be.

I don’t think I did it right.

 .ratio-keeper-jacket {
  position: relative;
  padding-top: 12%;

}

   <div class="ratio-keeper-jacket">
    <div class="jacket" title="Play"> <svg class="play" width="100%" height="100%" viewBox="0 0 64 64">
        <path d="M25.6,46.4L44.8,32L25.6,17.6V46.4z M32,0C14.3,0,0,14.3,0,32s14.3,32,32,32s32-14.3,32-32S49.7,0,32,0z
            M32,57.6C17.9,57.6,6.4,46.1,6.4,32S17.9,6.4,32,6.4S57.6,17.9,57.6,32S46.1,57.6,32,57.6z" />
      </svg> </div></div>
33

Yes that should work ok.

34

It won’t show a visual difference. It’s a safeguard in case actual content is used in that container. These methods are best kept as shown because then you can use them elsewhere without problems. Once you understand how to use them you can of course shorten or omit certain things but only if you know why.

I wouldn’t add an extra wrapper when none is needed so the question is moot. It makes it much too awkward. You can make the ‘square’ with 100% padding easily but if you add a wrapper then you mess up the percentages unless you duplicate exactly what is there already.

35

Let’s put actual content in the container to see how it works then.

Where would this content be placed?

Could you set up an example?

<div class="outer">
  <div class="tcell">
    <div class="jacket" title="Play"> <svg class="play" width="100%" height="100%" viewBox="0 0 64 64">
      <path d="M25.6,46.4L44.8,32L25.6,17.6V46.4z M32,0C14.3,0,0,14.3,0,32s14.3,32,32,32s32-14.3,32-32S49.7,0,32,0z
            M32,57.6C17.9,57.6,6.4,46.1,6.4,32S17.9,6.4,32,6.4S57.6,17.9,57.6,32S46.1,57.6,32,57.6z" />
      </svg> </div>
    <div class="video-wrapper hide">
      <div class="ratio-keeper">
        <div class="wrap ">
          <div class="video video-frame" data-id="M7lc1UVf-VE"></div>
        </div>
      </div>
    </div>
  </div>
</div>
36

I added content in, now, what am I supposed to see happening. where these properties are doing what they are supposed to be doing?

width: 1px;
margin-left: -1px;

Did I set this up right, or no?

Did I put the content in the right spot?

I don’t think I did this right.

.content {
  position: relative;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 200px;
  height: 200px;
  background: orange;
}

.jacket {
  position: relative;
  min-width: 148px;
  min-height: 148px;
  max-width: 363px;
  max-height: 363px;
  /* overflow:hidden; */
  margin: auto;
  cursor: pointer;
  /* background: url("https://i.scdn.co/image/fe6076b92ee8d20545c47124d3cc29ff049cd738") no-repeat 0 0; */
  background-size: cover;
  border-radius: 25px;
  border: 3px solid red;
  box-sizing: border-box;
}

.jacket::before {
  content: "";
  width: 1px;
  margin-left: -1px;
  float: left;
  height: 0;
  padding-top: 100%;
  background: blue;
}

.jacket::after {
  content: "";
  display: table;
  clear: both;
}

<div class="outer">
  <div class="tcell">
    <div class="content">
    </div>
    <div class="jacket" title="Play">
      <svg class="play" width="100%" height="100%" viewBox="0 0 64 64">
        <path d="M25.6,46.4L44.8,32L25.6,17.6V46.4z M32,0C14.3,0,0,14.3,0,32s14.3,32,32,32s32-14.3,32-32S49.7,0,32,0z
          M32,57.6C17.9,57.6,6.4,46.1,6.4,32S17.9,6.4,32,6.4S57.6,17.9,57.6,32S46.1,57.6,32,57.6z" />
      </svg>
    </div>
    <div class="video-wrapper hide">
      <div class="ratio-keeper">
        <div class="wrap ">
          <div class="video video-frame" data-id="M7lc1UVf-VE"></div>
        </div>
      </div>
    </div>
  </div>
</div>
37

No you have the content in the wrong place. The content would be inside the jacket and not sized or absolutely placed.

Read the article below as it explains all these methods in detail.

38

What am I supposed to see happening?

Am I supposed to notice something happening?

What are these properties doing to the content inside the jacket?
width: 1px;
margin-left: -1px;

.content {
  color: green;
  background: orange;
}

.jacket {
  position: relative;
  min-width: 148px;
  min-height: 148px;
  max-width: 363px;
  max-height: 363px;
  /* overflow:hidden; */
  margin: auto;
  cursor: pointer;
  /* background: url("https://i.scdn.co/image/fe6076b92ee8d20545c47124d3cc29ff049cd738") no-repeat 0 0; */
  background-size: cover;
  border-radius: 25px;
  border: 3px solid red;
  box-sizing: border-box;
}

.jacket::before {
  content: "";
  width: 1px;
  margin-left: -1px;
  float: left;
  height: 0;
  padding-top: 100%;
  background: blue;
}


.jacket::after {
  content: "";
  display: table;
  clear: both;
}

<div class="outer">
  <div class="tcell">
    <div class="jacket" title="Play">
      <div class="content">
       I had a little situation the other day where I needed to make one of those aspect-ratio friendly boxes. This isn't particularly new stuff. I think the original credit goes as far back as 2009 and Thierry Koblentz's Intrinsic Ratios and maintained popularity even for other kinds of content with articles like Uncle Dave's Ol' Padded Box.
      </div>
      <svg class="play" width="100%" height="100%" viewBox="0 0 64 64">
        <path d="M25.6,46.4L44.8,32L25.6,17.6V46.4z M32,0C14.3,0,0,14.3,0,32s14.3,32,32,32s32-14.3,32-32S49.7,0,32,0z
          M32,57.6C17.9,57.6,6.4,46.1,6.4,32S17.9,6.4,32,6.4S57.6,17.9,57.6,32S46.1,57.6,32,57.6z" />
      </svg>
    </div>
    <div class="video-wrapper hide">
      <div class="ratio-keeper">
        <div class="wrap ">
          <div class="video video-frame" data-id="M7lc1UVf-VE"></div>
        </div>
      </div>
    </div>
  </div>
</div>
39

If you close the desktop window smaller and smaller then at some point the content is too big to fit inside the square and when using other methods the content would be cut off which is not very helpful.

Using the method above the content will not be cut off and will still be readable even though the 100% height effect has been breached. It’s a safeguard. Imagine if a user had simply resized their text larger and you had important information in that aspect ratio box that the user couldn’t read because it was cut off. (You can test this in your fiddle by closing the window smaller and you can still read all the text. If you used the overflow:hidden method it would all be cut off.)

It’s all explained in that CSS tricks example with demos and pictures!

I already told you what they are doing. It’s a 1px wide float that has padding-top of 100% which means it forces the element to be as tall as it is wide thus creating a perfect square. You can change the padding-top to create any aspect ratio that you need but for your example it just needs to be 100% to create the square effect.

As the float is 1px wide it takes up 1px space inside the box and so just in case you wanted some full width content (such as an inline image) the float is moved out to the left by 1px allowing for content to fit exactly inside the box without a 1px gap at the left.

If you don’t have content (as in your original case) then you won’t notice a difference because you are simply using a background image. Why don’t you try changing the float’s width to 50px and then you will see a visible difference and it may become clearer what is is doing (and give the float a background color so you can see it more easily for testing).

1 Like
40

The text remains inside the red box whether these proprieties are there or not.

What am I not seeing that I should be noticing?

added

width: 1px;
margin-left: -1px;

removed

/* width: 1px;
margin-left: -1px; */

41

If you omit them then you have the danger that the browser will see the width and height as zero and not take any notice of them. Modern browsers should be ok but as I said above its a safeguard and it ensures the element will work in different situations. At the moment the content property is providing the content and although its an empty string it may have a width that we don’t know. By forcing the width and then moving the element out of the way we are safeguarding and enforcing the dimensions we want and not leaving things to chance.

As I said if you test all current browsers and platforms and don’t need to support older browsers then you can remove those properties but you do so at your own risk.

Those methods have been tried and tested on a number of browsers and the properties have been added for a reason at some time. It may be that modern browsers do not have an issue but old versions of IE would not take notice unless the float had a width.

So test in the browsers you want to support and then decide if you need those properties or not. There are no hard and fast rules but I prefer to err on the side of safety and less maintenance.

2 Likes