On this code you are not able to click on the area around the play image inside the red border.
https://jsfiddle.net/93pza8r2/
How would I do that with this code?
https://jsfiddle.net/opav7tx0/
It’s probably easiest to change the js so that only the play button has the click event.
e.g…jacket .play
const cover = document.querySelector(".jacket .play");
cover.addEventListener("click", coverClickHandler);
Then remove the cursor:pointer from .jacket.
Of course it probably open up another 1000 questions as I don’t know what else it will effect because I don’t know what you want to do next…
1 Like
What would the css code have looked like? What would’ve changed there?
You would have to size the jacket to the size of the play button. At present the jacket is the same size as that red border.
e.g. Pull out the play button dimensions and apply to jacket instead.
.play {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
fill: red;
filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.7));
cursor: pointer;
}
.jacket{
min-width: 70px;
min-height: 70px;
max-width: 30%;
max-height: 30%;
}
1 Like
How is the black clickable space removed?
What is that, why is it there, and how is it removed?
Code 1
https://jsfiddle.net/2ghd5rmj/
Code 2 Updated
https://jsfiddle.net/3vngdhLk/
It’s because you set a percentage max-width and height and that means it won’t be the same height as width.
Use vw width for both width and height like this.
.jacket {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
min-width: 70px;
min-height: 70px;
max-width: 150px;
max-height: 150px;
width:15vw;
height:15vw;
/*width: 100%;
height: 100%;*/
margin: auto;
cursor: pointer;
/*background: red;*/
border-radius: 25px;
background: black;
}
Then you will need to remove .jacket from the following rule or you will reset the width again.
.wrap /*,
.jacket*/ {
position: absolute;
top: -3px;
left: -3px;
width: calc(100% + 6px);
height: calc(100% + 6px);
}
2 Likes
… and if you want to remove all the black outside the red circle then set a border radius of 50% in the rule for .jacket.
.jacket {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
min-width: 70px;
min-height: 70px;
max-width: 150px;
max-height: 150px;
width:15vw;
height:15vw;
/*width: 100%;
height: 100%;*/
margin: auto;
cursor: pointer;
/*background: red;*/
border-radius: 50%;
background: black;
}
2 Likes
I have a question about the placement of the Curtain end div tag.
<div class="curtain">
Should it be placed at the bottom, below jacket.
or, below the
<div class="slide-wrap fadeout"></div>
Here: </div> ??
Where is the right place for it?
<div class="outer">
<div class="tcell">
<div class="curtain-wrapper">
<div class="curtain-ratio-keeper">
<div class="curtain">
<div class="video-wrapper">
<div class="video-ratio-keeper">
<div class="wrap">
<div class="video video-frame"></div>
</div>
</div>
</div>
<div class="slide-wrap fadeout"></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>
</div>
I think it would the 1st one, at the end of slide-wrap.
At the end of slide-wrap
At the bottom after jacket
Yes it should be as above where its always been I believe.
However as the jacket is absolutely placed it probably makes no difference (but I didn’t check).
What if instead I removed .jacket from the html and css, and in the js, replace .jacket with .play?
Would this work and be better?
https://jsfiddle.net/yf40Luhm/
<div class="outer">
<div class="tcell">
<div class="curtain-wrapper">
<div class="curtain-ratio-keeper">
<div class="curtain">
<div class="video-wrapper">
<div class="video-ratio-keeper">
<div class="wrap">
<div class="video video-frame"></div>
</div>
</div>
</div>
<div class="slide-wrap fadeout"></div>
</div>
<svg class="play" width="100%" height="100%" viewBox="0 0 64 64">
<title>Play</title>
<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>
That sounds as though it would work as I don’t think you were doing anything with .jacket apart from having it wrap the svg.
1 Like
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.