[Enhancement] Improve visibility of progress bar on video content

[kaitohm]

Description

It's been reported (Slack conversation link) that the progress bar on videos on Learn are visually difficult to locate. This is especially so when the video content is showing the wp-admin screen... which many of our videos do. (See screenshot below.) A better interface would improve accessibility.

Step-by-step reproduction instructions

1. Go to learn.wordpress.org
2. Click on Tutorials
3. Choose any tutorial and play video
4. Progress bar is difficult to locate, and will only appear large once one has hovered over the video

Suggested improvement

• Change color scheme (bold colors?) so it doesn't conflict with the default wp-admin screen often shown in videos.

But this is still very much open to other ideas and suggestions.

I realize this could involve enhancements to the video player we're using. I wanted to log the idea here so it doesn't get lost.

Screenshots or screen recording (optional)

Environment information

• Reproduced on Chrome on MacOS

[vagelisp]

I totally agree. That can be confusing.
We can easily fix that with CSS

Blue seems to work well and fits the general design.

[renintw]

@bsanevans
Since the video is embedded to Learn using iframe, which basically doesn't allow us to modify the CSS here in Learn as conceptually the stuff in an iframe has nothing to do with the page being embedded - it's just content from other sites. In our case, it's from wordpress.tv.

If we want to change the video's style, we must change it there. Before digging more into how we can change the style there (either by proposing ideas or making requests), I'm wondering if we are capable of trying this first https://jetpack.com/support/jetpack-videopress/jetpack-videopress-customizing-your-videos/#videopress-progress-bar-colors. I do not have permission to edit videos there, not sure if we can do the tweaks like that in the link.

[jonathanbossenger]

The Learn theme uses the default WordPress auto-embed functionality to embed the WordPress.tv video URL on the tutorial page

https://github.com/WordPress/Learn/blob/trunk/wp-content/themes/pub/wporg-learn-2020/template-parts/content-workshop-single.php#L32

This renders the video at full width above the content and sidebar on the tutorial (previously known as workshop) view.

If we changed this to use the VideoPress block, we'd need to extract the block on the front end to display in the same area, which I guess should be possible by extracting the video press block from the block markup in the post_content.

The other thing we'd need to do is update all current tutorials to use the VideoPress block, and not the video_url postmeta field.

I'm not saying it's not possible, just detailing what would be required to make this switch.

@bsanevans perhaps this is something we should discuss in a future training team meeting?

[vagelisp]

Ahh, I didn't even realise that was coming from an iframe when I added my comment.
It must have been a late-night one. Anyway, I apologise for the misinformation.

[kaitohm]

Thanks for the input, @jonathanbossenger. Considering we have other more pressing site development needs right now, I'm inclined to leave this issue as-is for the moment. We can bring it up again once we have more developers who are able to contribute to improving the Learn site.