Video cover prevents use of video play button

HTML & CSS
1

I’m having an issue

.split-wrap is blocking the middle of the video from being clicked on.

This affects the video in there.

Why is this happening?

oh, because split-wrap` overlays on the video container,

How is that resolved?

https://jsfiddle.net/h7pc64yL/

<div class="curtain">
  <div class="outer">
    <div class="tcell">

      <div class="container hide ">
        <div class="video-wrapper">
          <div class="ratio-keeper">

            <div class="border ">
              <div class="video video-frame"></div>
            </div>
          </div>
        </div>
      </div>

      <div class="panel-left"> </div>
      <div class="panel-right"> </div>

      <div class="split-wrap">
        <div class="j1">
          <div class="jacketa" title="[ Enjoy The Music ]">
            <svg class="coversvg" width="70" height="75.4" viewBox="0 0 47.96 51.66">
              <title>[ Enjoy The Music ]</title>
              <path class="back" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
              <path class="front" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
            </svg>
          </div>
        </div>
        <div class="j2">
          <div class="jacketa" title="[ Enjoy The Music ]">
            <svg class="coversvg" width="70" height="75.4" viewBox="0 0 47.96 51.66">
              <title>[ Enjoy The Music ]</title>
              <path class="back" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
              <path class="front" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
            </svg>
          </div>


        </div>
      </div>

    </div>
  </div>
</div>
2

The issue is probably (and this is a guess as I can’t look at the code while away) because there are now 2 play images and I guess your js is only expecting one.

I can test when I get back on the weekend.

1 Like
3

I updated the javascript here to account for that.
https://jsfiddle.net/g54q2rb3/

Now it expects more than 1 .jacketa

Both sides of play image are now clickable.

The issue is still there though.

  const cover = document.querySelectorAll('.jacketa');
  cover.forEach(function(el) {
    el.addEventListener('click', coverClickHandler)
  });
}());
4

If you don’t mind my evaluation of your method: 100% of the viewers will not like clicking on a play button twice, especially with many seconds of waiting in between.

5

Trying to get this fixed first before going further.

6

What issue are you seeing?

It seems to work in Chrome if you click anywhere in the play button or did you mean something else. Or is this a specific browser issue?

7

Here, try clicking on the youtube play button in the middle.

https://jsfiddle.net/ud4k6rf0/1/

8

I thought you were talking about the big round animated circle. :slight_smile:

The issue with the player can be fixed with the code I gave in various other threads but specifically.


.slide .split-wrap{
  pointer-events:none;
  z-index:-1;
}
1 Like
9

Is adding this the same thing?
https://jsfiddle.net/ds7hc6pk/2/

const splitWrap = document.querySelector(".split-wrap");
splitWrap.style.pointerEvents = "none";

And how come that doesn’t work when added to the css?

This: unless I’m doing it wrong

https://jsfiddle.net/9mhyL68f/1/

.split-wrap {
  pointer-events: none;
}
10

If you do that then you can never click the element at all. You only want the element un-clickable after you have started the animation which is why I used the slide class as its basis.

.split-wrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 240px;
  height: 260px;
  margin: auto;
  border-radius: 50%;
  transition: 10s ease;
}
.slide .split-wrap{
    pointer-events: none;
}

Just think things through. There are reasons why:)

3 Likes
12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.