Don’t containers usually enclose other things?
https://jsfiddle.net/Lkqhzje7/
This one has nothing inside.
<div class="container">
</div>
<div class="outer">
<div class="tcell">
<div class="curtain-wrapper">
<div class="curtain-ratio-keeper">
<div class="curtain ">
<div class="container">
</div> <!-- .container -->
<div class="video-wrapper">
<div class="video-ratio-keeper">
<div class="wrap">
<div class="video video-frame">
</div><! -- .video-frame -->
</div><!-- .wrap -->
</div> <!-- .video-wrapper -->
</div><!-- .video-ratio-keeper -->
<div class="panel">
</div><!-- .panel-left -->
<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><!-- .jacket -->
</div> <!-- .curtain -->
</div> <!-- .curtain-ratio-keeper -->
</div> <!-- .curtain-wrapper -->
</div><!-- .tcell -->
</div><!-- .outer -->
PaulOB
July 12, 2021, 6:33pm
2
It’s your code. Don’t you know why you added it?
It’s providing the red border that goes around your box. I’m guessing that at one time it probably contained the whole content but in your multiple changes it seems to be isolated on its own.
You should avoid empty divs where possible (its not always possible) and try to utilise :before and :after when you have odd decoration needs rather than adding an empty div just to add a border somewhere. I believe I have given numerous examples of this in your previous layouts to show how to cut the noise down in your pages.
1 Like
Is this how it is supposed to work?
When this .container is in the css like this:.container {}
When you click on it the video appears.https://jsfiddle.net/e4ronzgw/4/
When .container has stuff in its css,
.container {
width: 100%;
height: 100%;
border: 3px solid red;
box-sizing: border-box;
border-radius: 25px;
background: blue;
}
When you click on it, video does not appear.https://jsfiddle.net/tLekvn76/
But the video isn’t even in that location of the html.
<div class="container"> </div>
<div class="video-wrapper">
<div class="video-ratio-keeper">
<div class="wrap">
<div class="video video-frame"></div>
</div>
Should this be targeting a different class?
const thewrap = cover.parentNode.querySelector(".container");
Which would allow me to remove .container from the html and the css.
or, is .container just meant as a placeholder thing?
What if I removed .container from the code and replaced it with .wrap instead?
https://jsfiddle.net/bmpo75xn/3/
function coverClickHandler(evt) {
const cover = evt.currentTarget;
const thewrap = cover.parentNode.querySelector(".wrap");
hide(cover);
show(thewrap);
}
<div class="video-wrapper">
<div class="video-ratio-keeper">
<div class="wrap">
<div class="video video-frame">
</div><! -- .video-frame -->
</div><!-- .wrap -->
Removing a lot of the CSS, I did this.
And the code still seems to work.
Does this look good to you?
Anything I should keep in the code that I removed?
The way I tested it was, after removing each property I ran the code, if I didn’t notice a difference, then it got removed.
https://jsfiddle.net/hruwmx49/
html,
body {
height: 100%;
background: #000000;
padding: 0;
margin: 0;
}
.outer {
display: table;
height: 100%;
margin: 0 auto;
width: 100%;
}
.tcell {
display: table-cell;
vertical-align: middle;
padding: 8px 8px;
}
.curtain-wrapper {
min-width: 40%;
max-width: 640px;
margin: auto;
}
.curtain-ratio-keeper {
position: relative;
padding-top: 56.25%;
}
.curtain {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
/* margin: auto; */
/* width: 100%; */
/* height: 100%; */
border: 3px solid red;
/* box-sizing: border-box;*/
border-radius: 25px;
overflow: hidden;
background: green;
}
.panel {
position: absolute;
height: 100%;
width: 100%;
top: 0%;
transition: all ease 8s;
background-color: rgb(91, 96, 106);
}
.curtain.slide .panel {
transform: translateX(-100%);
}
.video-wrapper {
min-width: 40%;
max-width: 640px;
margin: auto;
}
.video-ratio-keeper {
position: relative;
padding-top: 56.25%;
}
.video-frame {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.jacket {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
/* height: 100%; */
/* width: 100%; */
/* margin: auto;*/
cursor: pointer;
/*border-radius: 25px;*/
}
.play {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
min-width: 70px;
min-height: 70px;
max-width: 30%;
max-height: 30%;
fill: red;
filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.7));
cursor: pointer;
}
/* .wrap {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
border-radius: 25px;
} */
/* .wrap,
.jacket {
position: absolute;
top: -3px;
left: -3px;
width: calc(100% + 6px);
height: calc(100% + 6px);
} */
/* .wrap iframe {
position: absolute;
top: -3px;
left: -3px;
width: calc(100% + 6px);
height: calc(100% + 6px);
} */
.hide {
display: none;
}
PaulOB
July 12, 2021, 8:45pm
5
Yes you can delete those items you have commented out. When you use 4 co-ordinates for an absolutely placed element then you effectively set the width and height of it to match its relative parent. Therefore width and height are not required because you already told it where to sit. Margin:auto would be superfluous also because there is nothing to centre because it already fills the available space.
As far as removing html elements then you are probably tied to your JS as its written to expect some of those elements so be careful in deleting things.
In essence half of that html is not needed as it can be done more simply without so many nested divs but I gave you that layout a million changes ago but you never used it.
3 Likes
system
October 12, 2021, 3:45am
6
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
