Blazy Image to Iframe doesn't work if Blazy Player buttons overridden in Twig (using the new button attributes)

Okay, got it. The seperate

<i class="ico ico-play-circle"></i>

inside the button causes the problem, setting pointer-events:none; to it, make it work.

But this should not required? But the craziest part here is, that the iframe is added into the button without this ... no idea how this is possible.

Thank you.

> The Iframe is added inside the play button:
Looks like your added icon hijacks the button event?

Try adding CSS rule:

.ico-play-circle {
  pointer-events: none;
}

Or better add the icon ico-play-circle into the button attributes directly?

Changed to Supports since it is a custom works with many potential solutions or root causes.

Looks like your added icon hijacks the button event?

Ah! Blazy JS probably adds the iframe after the element which triggered the event? This explains it.

I'll add pointer-events:none, seems the best solution for now. I have no good idea how to improve this without adding another wrapper to rely on for adding the iframe.

Thanks so far!

Added check for the expected parent to avoid this issue in the future.

However since you have to override CSS anyway, the less problematic would be:

<button{{ close_button_attributes }}></button>
    {% set play_button_attributes = play_button_attributes.addClass('fa fa-play') %}
    <button{{ play_button_attributes }}></button>

Or even just CSS without touching Twig:

.media__icon--play::before {
  content: "\f04b";
  font-family: "Font Awesome 5 Free";
}

And remove the rest of disturbing rules after overriding blazy.media.css.

Perhaps in the next releases we should make play_button_attributes and close_button_attributes variables for trivial overrides.

Automatically closed - issue fixed for 2 weeks with no activity.