YouTube play button gets stuck and takes some time to disappear

Is there something I could add to the code that would fix that?

I think this issue is easy to reproduce to see what I’m talking about.
I would say that it happens sometimes, but has happened to me a few times in a row.

It started happening after I added this into the code:

.wrapg .lines::before,
.wrapg .lines::after {
  content: "";
  position: absolute;
  top: 0;
  left: 198px;
  width: 3px;
  height: 100%;
  background: #0059dd;
}

.wrapg .lines::after {
  left: 399px;
}
  <iframe class="js-player " src="https://www.youtube-nocookie.com/embed/M7lc1UVf-VE?rel=0&autoplay=0&controls=0&iv_load_policy=3&cc_load_policy=0&fs=0&disablekb=1&enablejsapi=1" frameborder="0" allow="autoplay; encrypted-media" ></iframe>
 <div class="lines"></div>

image

1 Like

I was referring to the red play button, it stays for a few more seconds and doesn’t disappear right away. But it’s not something that happens all the time, but it still happens.

The 2 lines going down are interfering with the red playbutton somehow.

1 Like

I can’t replicate the issue in Chrome or Firefox so it will be hard to help.

I don’t think adding the lines on top is going to be a cause except that if your cursor is over the line itself then it will not click the video.

The line is only 3px wide so your cursor needs to be exactly on the line and then you can’t click the video. (You could add pointer-events: none as in your other gradient example to allow a click through. Note that the gradient version in your other post covers the whole video whereas the lines version is only as wide as the lines themselves. Pointer-events is not supported in less than IE11 and those browsers won’t be able to click the video at all. I generally only support ie11+ anyway but in cases where the code results in a complete loss of function for older browsers you need to think carefully).

It only happens sometimes where the red button stays stuck before it disappears, and has happened in both chrome and firefox.

It just happened to me about 5 times

Try this one:

1 Like

Hover the button then move it off the square, do that a few times in and out, on and off before clicking the button.

Try it on both of these until you see red play button staying for a few seconds before disappearing.

Or this one

You might not be able to get it.

1 Like

Ok, yes I can see it occasionally staying on for a few seconds longer in Firefox but it always eventually disappears.

It’s almost impossible to debug as it doesn’t happen consistently. It does seem to be that when anything is placed over the iframe that the problem occurs as removing the overlay seems to make the bug go away (or it may just be bad luck that it doesn’t display the bug when testing).

I tried placing something partially over the iframe and the bug seems to occur when something covers over half the whole height even if its only 3px wide. I tried using actual html instead of before and after but the bug is still there.

In the end the button disappears so there’s no real harm done.

Can’t think of anything else to try to get the effect you want.

1 Like

Is it ok to stack these like this?
or would you recommend against it.

.jacketc .lines::before,
.jacketc .lines::after,
.wrapg .lines::before,
.wrapg .lines::after  {
  content: "";
  position: absolute;
  top: 0;
  left: 198px;
  width: 3px;
  height: 100%;
  background: #0059dd;
}

.jacketc .lines::after,
.wrapg .lines::after {
  left: 399px;
}

Can the CSS remove the lines as the iframe is clicked on, or can only javascript do that?

I was trying to do this.

As you are clicking the iframe then you would need to use js to hide the lines by adding a css class etc.

I’ve spent quite a lot of time looking at this bug and it seems to only occur when you scroll the page up and down a little and when the lines are present on top. I’m guessing that there are overlays on the iframe itself that somehow are interfered with by having the lines on top although it should not have that adverse effect (except on the portion where the lines are).

I tried a lot of things and the only consistent thing was to remove the lines or move them off the iframe.

Maybe adding a class when you click the iframe and then removing the lines could be a possible solution.

1 Like

I tried to do that here but it’s javascript and I don’t understand how the iframe would be targeted. So that when it’s clicked the lines would be removed.

Here is with the code isolated:

I was taking bits and pieces out of how this code was done:
of how active, and inactive were used there.
https://jsfiddle.net/zb6mkug3/98/


.wrapg/*.active*/ .lines::before,
.wrapg/*.active*/ .lines::after {
  content: "";
  position: absolute;
  top: 0;
  left: 198px;
  width: 3px;
  height: 100%;
  background: #0059dd;
}

.wrapg/*.active*/ .lines::after {
  left: 399px;
}

.wrapg.inactive .wrapg .lines {
  display: none;
}

I found what’s causing it:

Play Button disappears right away
controls=1

Play Button gets stuck before it disappears.
controls=0

But only in Firefox.

Yes that seems to be a consideration but the cause is actually the lines because removing the lines makes the controls work ok…

It just confirms that firefox is layering over the iframe and the lines somehow get in the way when the controls are there.

It’s a bug only you will notice I can guarantee :). I would be more put off by thinking “why are there blue lines across my video”? :wink:

2 Likes

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