stop videos causing horizontal scrolling

[fstrr]

Videos in the Reflow Understanding document were causing horizontal scrolling at 320px width. This fixes that issue.

... this scenario passes because all non-excepted content reflows. However, this does not provide the best user experience, and ideally the styling of the video player would be updated to mitigate the otherwise unnecessary horizontal scrollbar.

[netlify]

✅ Deploy Preview for wcag2 ready!

Name	Link
🔨 Latest commit	a514457
🔍 Latest deploy log	https://app.netlify.com/projects/wcag2/deploys/68accb1f234d9200085edd41
😎 Deploy Preview	https://deploy-preview-4495--wcag2.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

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

[patrickhlauke]

really wish relevant CSS could just be added to the standard w3c stylesheet rather than ad-hoc like this

[fstrr]

Indeed.

[fstrr]

@kfranqueiro Any chance of getting the W3C stylesheets updated to add max-width:100% to video tags?

[kfranqueiro]

We shouldn't need to do this inline on every video; in fact, Patrick contributed a PR before that applies this centrally.

We already have a style like this in this repo's own base.css, specifically for .example video and #examples video, originating in #3115 (which is what Patrick's PR followed up on).

I'm not sure if there was an actively-observed preventive reason as to why the selector was limited to examples sections, or if it was purely based on assumptions that the Reflow page now breaks due to its heading structure being inconsistent with most other Understanding pages. I can ask @iadawn if he happens to remember.

I also notice we have a style scoped to figure video elsewhere in base.css, and wonder if the same selector would be reasonable to use for this.

[fstrr]

updated the PR to add an example class to each relevant video's parent element.

[kfranqueiro]

I checked with Kevin, and the reason behind the selector he used was purely for defensive coding without digging deeper into potential ripple effects at the time.

I checked the wcag repository, and the only instances of video are within figure or #examples, within the Reflow page.

So I think we could safely change the selector around max-width: 100% in base.css to the following without any repercussions:

#examples video,
figure video {
  max-width: 100%;
}

Then you shouldn't need to touch reflow.html at all.

Do you want to try this, or would you like me to create an alternative PR?

[fstrr]

1. Removed example class from reflow figures
2. added your max-width rule to base.css