Cannot scroll webpage if cursor is over Azure Media Player element

Question

When including Azure Media Player in a html webpage, I cannot scroll the webpage vertically with mouse wheel if the cursor is over the player element.

The goal is to achieve the opposite behavior, scroll the page even if the cursor is over the player.

I could reproduce the issue on Chrome and Edge while on Firefox the issue is not present. Demo: https://jsfiddle.net/buliko/h3106w9z/

I tried to apply pointer-events: none; to the video html element which solved the scrolling issue but unfortunately hovering on the player did not make the control bar display. I tried to programmatically display the control bar on mouseenter event by calling player.controls(true) which did not help.

Is there any way to fix this issue? If yes, how?

Answer 1

Can you try -

.amp-default-skin .vjs-text-track-display {
    pointer-events: all !important;
}