Skip to content

Migrate Reflow videos to WAI Understanding WCAG YouTube account #4304

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from

Conversation

kfranqueiro
Copy link
Contributor

@kfranqueiro kfranqueiro commented Mar 27, 2025

This is a proposal; I'm opening this PR to generate a preview to allow for further evaluation/discussion.

This replaces the mp4 files that were merged in #4055 with YouTube video embeds, using unlisted videos posted to a WAI account. It is coded using a pattern that avoids loading until direct interaction. The pattern is centralized in an include file, intended to make instances as easy as possible to adapt from YouTube's iframe embed code snippets.

The goal of this is to establish a pattern to avoid adding binary files of significant size to the repository, which would ultimately have the effect of irreversibly growing the repository size, impacting everyone who needs to work with it locally.

I tried this approach first, since it is feasible for the WAI team to manage without additional dependencies. This particular approach does have downsides:

  • YouTube is not accessible in all countries
  • YouTube blocks embed playback from VPNs (at least when not signed in)
  • JavaScript is required for playback
  • The header and control overlays initially mask the top and bottom of the video for a few seconds (there used to be parameters to minimize this but they have been removed)
  • Autoplay seems to require &mute=1 in webkit browsers, even with allow="autoplay" included; this is fine for these videos which have no audio, but worth noting for future. (This PR avoids loading the embeds on page load, so autoplay is only taking effect after an initial user interaction; without it, playing would require 2 clicks)

@netlify /understanding/reflow

Copy link

netlify bot commented Mar 27, 2025

Deploy Preview for wcag2 ready!

Name Link
🔨 Latest commit d7808c8
🔍 Latest deploy log https://app.netlify.com/sites/wcag2/deploys/67e59d216d967a000908623c
😎 Deploy Preview https://deploy-preview-4304--wcag2.netlify.app/understanding/reflow
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@TestPartners
Copy link

I hope you're not planning to use the YouTube embedded media player. The accessibility is very poor and there's nothing you can do about it. Able Player is a much better choice and it can play videos hosted on YouTube, although a few of the accessibility issues remain. The best solution is Able Player with the videos hosted somewhere else.

@kfranqueiro
Copy link
Contributor Author

@TestPartners thanks for the additional feedback. Fortunately, after more conversations with the team, we should have a more direct option available that won't require reliance on YouTube embeds. I'm going to close this.

@kfranqueiro kfranqueiro deleted the kgf-reflow-videos branch March 28, 2025 12:35
mbgower added a commit that referenced this pull request Apr 1, 2025
Resolves #768

Alternative to #4304 that instead migrates videos to W3C's Cloudflare
Stream account. The videos have been marked as downloadable, so they can
be embedded identically to how they were before.

In addition to removing the mp4s from the repo, I've cleaned up a
commented-out gif, and made sure each video has alternative text.

(Note that although the videos are removed, they are still in git
history and thus still consume space; the intent is for this to be the
pattern going forward and to avoid adding more mp4 files to the
repository.)


[Preview](https://deploy-preview-4308--wcag2.netlify.app/understanding/reflow)

Co-authored-by: Mike Gower <mikegower@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants