Improve video output experiences

[isabela-pf]

Problem and context

This issue comes from our user testing round 2: content. One of the content types that we tested in this round was a video added via iframe. While some of the feedback would be dependent on the notebook or video author (like having captions or transcriptions for videos), this issue will only cover the things that are rendered notebook styling dependent.

Surprisingly based on their reputation, the iframe-embedded video did not provide a major challenge for participants. Participants were able to complete tasks to 1. locate the video 2. play the video 3. start the video consistently. Still, that doesn't mean there weren't obstacles.

• Focus on the video wasn't always clear, and when at high browser zoom or magnification it would become difficult to tell which parts of the screen showed the video or surrounding notebook content.
• For all participants, a lack of title or any kind of video label caused some confusion. This was more impactful on screen reader users because it made the video area and what they might be playing unclear.
• Finding the initial play button (the one that takes up the whole of the video thumbnail) also was unclear. Participants using a screen reader often did not tell it was a play button until after leaving the video and trying again. They were able to tell it was a video, which is what usually caused them to try again.

Possible solutions

I think we could at least improve the video experience by

• Adding a visual bounding box or border to video players
• Display a title for videos, even if it needs to be the file name or link title when authors do not assign it
• Provide better labeling or indication that the video thumbnail doubles as a play button or have the video control buttons appear outside the thumbnail prior to clicking

Acceptance criteria

This issue can be closed when we:

• Merge a PR that makes the above updates to the default video styling.

Tasks to complete

• Take note of current state for video experience and/or triage what might be making the thumbnail play button not be a clear button
• Make changes to default video styling and review
• Make PRs to add changes to update the default video styling