https://jsfiddle.net/og5uqz91/
What am I doing wrong?
background: blue url("https://via.placeholder.com/264x264");
background-position: center;
background-size: 20.62% 36.66%;
264 height image
divide 720 height screen
20.62%
264 width image
divide 1280 width: screen
36.66%
That would be 20.62% of the backgrounds width (which could be anything as its a fluid width) and 36.66% of the backgrounds height which also could be anything depending on how tall the window is.
You don’t have any point of reference for the percentages to give you a square.
You could try background-size:auto auto but I don’t really know what you were expecting?
You probably need another element with a square aspect ratio to apply the background if you want more control.
How would I set it up similar to this?
Create an invisible container around it?
Use media queries?
https://jsfiddle.net/5vtbe4xd/
That one is inside an element that has a fixed aspect ratio (the ratio-keeper element). That means that your background size of the image is always consistent to that ratio keeper.
In the new demo your background is basically just the viewport and will be any shape so there is no relationship that can give you a square.
If you size the video-one to be a square with aspect-ratio you can probably get close to what you want like this.
.video-one {
position: absolute;
width: 100%;
top: 0;
left:0;
bottom:0;
transition: all 8s ease-in 0s;
transition-delay: 1s;
background: blue;
z-index: 0;
display:flex;
justify-content:center;
}
.video-one:after{
content:"";
background:url("https://via.placeholder.com/264x264");
background-position: center;
background-size:contain;
background-repeat:no-repeat;
aspect-ratio:1 /1;
width:25%;
min-width:180px;
}
Note that your play button isn’t responsive so won’t get smaller like the background.
You’d need to imitate the same two containers as the ratio-keeper.
Roughly like this.
.video-one {
position: absolute;
aspect-ratio: 16 / 9;
border: 1px solid red;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
overflow: hidden;
max-width: 640px;
background: blue;
z-index: 0;
}
.video-one:after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
background: blue url("https://via.placeholder.com/264x264");
background-position: center;
background-size: 45% auto;
background-repeat: no-repeat;
}
That doesn’t allow me to have the entire screen blue, and for it to slide up when clicking on the play.
You asked for the opposite.
The background is is dark and the blue is the centred ‘ratio’ container.
If the background was also blue then you had what you already had before you asked for it to be like your screenshot?
What is supposed to slide up?
The blue background or the image in the middle. You can’t just slide the middle in the image up? To be honest that’s not quite true but you’d have to slide it up through the whole viewport before it disappeared.
You will need to be clearer in describing what you want to happen as there are too many unknowns in your request:)
The blue background as it is doing here: https://jsfiddle.net/nq9vwbxc/
The play is clicked and the background slides up.
Yes but the blue covers the whole background. (It looks very odd to me when it slides (especially with the gray image in the centre).)
But I don’t see how that ties in with your request to have it look like this?
It sounds like you don’t want a red bordered centred video sized container now? I’m confused.
I was only referring to how the image was resized, the aspect ratio of it.
I think we had that in post #4 more or less.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
