Hiding Tooltips for YouTube video using CSS

[rsalsbery]

A few customers have noticed on occasion that the Tooltip pop-up containing Video information occurs when the mouse pointer is over the placement of the Video block. I looked into several methods to hide this without having to connect a mouse to the DAKboard OS device and actually moving the pointer when I found the following CSS code that seems to work.

#player { cursor: not-allowed; }

Placing this in the Custom CSS Rules section of the screen essentially makes it so that the cursor is not in the player block until the user attaches a mouse and moves it preventing the Tooltip.

This case is to review this and see if there are any other side effects of this, and potentially add it to the code to prevent this from happening again.

[Dan-Peck]

The original solution may not work, because the player id is down inside the YouTube code, which security measures regarding reaching down into code loaded from another site (ie, youtube) may cause that CSS to be ignored and have no effect.

However, if there is no need to interact with the player controls of the video, and simply let it autoplay, this CSS could work:

IFRAME.youtube {
   pointer-events: none;
}

This is because the IFRAME.youtube tag was generated by dakboard.com so it should honor it. Understand, however, that setting pointer-events to none will prevent ANY clicking/hovering/etc interactivity with the video block at all. However, most of the time, DAKboard Screens will be used for display only, so this could be a viable solution, using Custom CSS.

That said, there are also some measures we might be able to take to avoid having to address it that way. Will report back whether they are consistently successful or not, after further testing.

[cocarrig]

@Dan-Peck being careful to not impact touchscreen experience, I believe it would be wise to add this as a configurable option in the block.

[Dan-Peck]

@Dan-Peck being careful to not impact touchscreen experience, I believe it would be wise to add this as a configurable option in the block.

Good thinkin' about the touch screen usage! However, to clarify: The pointer-events: none option is intended for those who wish to use Custom CSS, now, to take care of the situation in lieu of the originally posted cursor: not-allowed. The actual solution I am currently working on will not be changing pointer-events at all; instead will only be removing the "title" attribute of the IFRAME element (which is where the tooltip text comes from). So far, tests have proven successful in this regard, making even the Custom CSS unnecessary. So is promising!

[Dan-Peck]

Merged in @ 251fde3 and added to the queue for upcoming release to the live site.