Video cover prevents use of video play button

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>

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

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)
  });
}());

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.

Trying to get this fixed first before going further.

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?

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

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

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

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;
}

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