4 posts were split to a new topic: Shrink a YouTube video responsively
overflow:hidden; works on this code
https://jsfiddle.net/vb03uazy/1/
.outer {
display: table;
height: 100%;
margin: 0 auto;
width: 100%;
overflow: hidden;
}
But not this code.
And how would I get it to work on here?
https://jsfiddle.net/cvj9d7uz/
.outer {
display: table;
height: 100%;
margin: 0 auto;
width: 100%;
overflow: hidden;
}
The same as I told you before and add position:relative to .outer. You have no parent with position:relative in that example unlike the other one.
1 Like
Adding a parent would mean, adding another div, whch isn’t necessary, and would make no sense, right?
That’s correct as there are a number of existing elements that can be used for this purpose.
Only add extra html when you can’t do it without. 
1 Like
50% of say 99 is 49.5 which sometimes gets rounded down to 49px and would leave a gap (which was evident i my demo when slowly resizing the screen). Adding an extra 1px solves that issue.
Here it is at width: 50%;
https://jsfiddle.net/kjaLbt9w/
Can you post an image of the gap you are referring to because I still can’t find it.
I’m resizing the screen and not noticing anything.
In the code you provided, I changed it to
width: 50%;
I still don’t see the gap.
I want to be able to see the odd pixel width gap, but I don’t see it.
Are you able to see the gap here?
In this code?
I added the red one here and I still don’t see a gap.
https://jsfiddle.net/6mdjb0en/
.slide-wrap:before,
.slide-wrap:after {
content: "";
position: absolute;
top: 0;
width: 50%;
height: 100%;
transition: transform 5s linear;
background: url(https://picsum.photos/id/1015/1500/1500) no-repeat;
background-attachment: fixed;
background-size: cover;
}
If I change the width to 1px;, there is still no gap.
https://jsfiddle.net/92pg0d1t/2/
.slide-wrap:before,
.slide-wrap:after {
content: "";
position: absolute;
top: 0;
width: 1px;
height: 100%;
transition: transform 5s linear;
background: url(https://picsum.photos/id/1015/1500/1500) no-repeat;
background-attachment: fixed;
background-size: cover;
}
It doesn’t seem to show in the fiddle as probably something in the way they handle their panels.
However you can see it in this codepen if you just resize the window slowly.
If you put the code directly into codepen as is, do you still see the gap?
https://jsfiddle.net/6mdjb0en/
Have you tried that?
If you still don’t see it in codepen, then it’s not a panel issue, and then, our codes may be set up differently that causes a gap to show on one, but not the other.
I know this code doesn’t use flex, and your code does, which is 1 difference.
And our html’s are set up differently.
Does this tell you anything?
Can you say what is the reason why your curtain is open all the way, and with mine, it’s still closed?
I can’t figure it out.
Maybe this will be able to help figure out why I am not seeing a gap with my code.
Your code width: 1px;
https://jsfiddle.net/539cmqjb/
.slide-wrap:before,
.slide-wrap:after {
content: "";
position: absolute;
top: 0;
width: 1px;
height: 100%;
}
<div class="outer">
<div class="inner">
<div class="curtain-ratio-keeper">
<div class="video-wrapper">
<div class="video-ratio-keeper slide-wrap">
<div class="wrap">
<div class="video video-frame"></div>
</div>
</div>
</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>
</div>
</div>
My code width: 1px;
https://jsfiddle.net/92pg0d1t/2/
.slide-wrap:before,
.slide-wrap:after {
content: "";
position: absolute;
top: 0;
width: 1px;
height: 100%;
}
<div class="outer">
<div class="tcell">
<div class="curtain">
<div class="curtain-ratio-keeper">
<div class="wrap hide">
<div class="video video-frame"></div>
</div>
<div class="slide-wrap"></div>
</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>
</div>
OK in my example I hadn’t set the flex-item to expand so it was shrink to fit and that seems to cause the 1px gap rounding error,
If I add this:
.inner {
flex: 1 0 0%;
}
The gap disappears and the element stretches to the right size.
There is no gap on this demo now.
In your example you were using a different method anyway which wasn’t using the shrink to fit of a flex-item as you were using a table-cell which stretches to fill the parent (which is essentially what I did to the flex item with flex:1 0 0).
You’ll just have to put it down to one of those things that happen.
As I mentioned before its probably best to start from scratch when you want a new layout as we keep using the same code to do different things when really it should be built with the intention of the final design.
1 Like
It was a flex issue then, and now width: 50%; is good to use.
I will keep this as an example for future reference.
1 Like
Converting my code to display: flex; I am left with 2 issues.
https://jsfiddle.net/hkuejs2L/
- padding: 8px 8px; is only working on the left and not the right side.
How is that fixed?
.outer {
display: flex;
min-height: 100%;
box-sizing: border-box;
padding: 8px 8px;
}
- The play image is not centered in the middle of the red border.
How is that fixed?
.play {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
width: 98px;
height: 98px;
border-radius: 50%;
fill: red;
filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.7));
cursor: pointer;
}
Is another div class needed?
<div class="outer">
<div class="curtain">
<div class="curtain-ratio-keeper">
<div class="wrap hide">
<div class="video video-frame"></div>
</div>
<div class="slide-wrap"></div>
</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>
This worked to center the play image:
I added relative to .curtain.
https://jsfiddle.net/p5fs7cvL/
.curtain {
position: relative;
min-width: 40%;
max-width: 640px;
margin: auto;
flex: 1 0 0%;
}
Removing width: 100%; from here fixed the padding issue.
https://jsfiddle.net/sx3zv475/
.curtain-ratio-keeper {
position: relative;
height: 0;
padding-top: 56.25%;
overflow: hidden;
border-radius: 25px;
border: 3px solid red;
}
1 Like
On here background-attachment: fixed; is only placed on .slide-wrap.
It works without it being placed on the body, does fixed still need to be placed on the body?
https://jsfiddle.net/mfxnpd08/
body {
background: url(https://picsum.photos/id/1015/1500/1500) no-repeat;
background-size: cover;
}
.slide-wrap:before,
.slide-wrap:after {
content: "";
position: absolute;
top: 0;
width: 50%;
height: 100%;
transition: transform 5s linear;
background: url(https://picsum.photos/id/1015/1500/1500) no-repeat;
background-attachment: fixed;
background-size: cover;
}
If you are trying to cut down on code then you declare the background all in one rule like this:
body,
.slide-wrap:before,
.slide-wrap:after {
background: url(https://picsum.photos/id/1015/1500/1500) no-repeat fixed 50% 50% / cover;
}
1 Like