New Video module

[stephanieosan]

Task

As part of the Ask enhancement work, there's a desire to create a video module that plays on the page. More videos will be added to Ask pages, either as an alternative to reading the answer or for additional context. Currently, the only option is to include the video full-width using the video module, but it breaks up the content on the page in a way that disrupts the flow of the page.

During regroup, we sketched an idea for how this might work. Hubcap issue for reference—will update with more detailed notes: GHE/CFPB/hubcap/issues/117 . The idea is that a small video could be added like an inset image, but when clicked, could expand to fill the width of the body of the page.

Notes

The initial request was based on the Ask project, but this use case could be extended to blogs as well as pages like "Determine your down payment".

Acceptance criteria

• User can view the video without leaving page page
• Video appears as an inset on the page (for example: 33%) and expands to an accessible size on the page so it can be played in place (and then closed, if desired)
  -- Text wraps around the video image
  -- Video image can be positioned to the right of the text that it directly relates to (so a user comes across it in context)

Ready Checklist

• Has acceptance criteria or is part of a user story
• Describes the smallest possible chunk of work
• There are no blockers to starting the task
• All information necessary for completion is available
  - All input from other disciplines (Design/UX/Content/FEWD/BEWD) is attached
  - There are no outstanding questions for stakeholders

Done Checklist

• All work has been peer-reviewed
• Has been acceptance tested and meets acceptance criteria
• All code or assets are merged to master
• All relevant documentation has been updated

[sonnakim]

More details from Hubcap issue 117:

@nataliafitzgerald wrote:
Re Ask answer pages, stakeholder asked in 2019 that we look at alternatives to the full width video approach. The stakeholder has concerns that video breaks up the content on the page in a way that disrupts the flow of the page. But they don't want the user to leave the page to watch the video.

When we add videos this way, they are full width on the page and content flows above and below. Breaking up running text in this way is disruptive to users as they read down the page (in effect it creates a wall blocking the flow). In order to avoid this, editors (or designers) have only one option: place embedded full width videos at the very bottom of the page content OR add a video still (image) with a link to a separate page.

We have requests from many of our CE stakeholders for a video option that can be used on a page with running text (like Ask answers or blogs) and meet 2 requirements:

• Play on the page (user does not leave the page to watch the video)
• Appear as an inset on the page (for example: 33%) and expand to an accessible size on the page so it can be played in place (and then closed, if desired)
  • Text wraps around the video image
  • Video image can be positioned to the right of the text that it directly relates to (so a user comes across it in context)

Stakeholder goals:

• User can view the video without leaving page
• Video flows with the content on the page (for example, an inset or partial width where the answer content flows around the video)
• Video approach meets accessibility requirements

Stakeholder concerns with full-width approach:

• Video breaks up the content on the page
• There is no ideal placement (if video is at the top, it overshadows the answer, if it's in the middle it can get buried, if it's at the bottom it can get missed)

Stakeholder request

• A small video image that can be clicked to expand and play on the page
• User does not leave the page (so an inset, 25/75, 50/50 approach where a video link or clicking on the image takes you to a separate page won't meet their goals)

@Scotchester added:

I could see a potentially useful module that puts, say, a third-width video thumbnail floating to the right of the main content area, that, when clicked to play, expands to the full width of the main content area page and pushes down the text that was flowing around it.

A discussion was proposed, but didn't happen (at least, I don't see any meeting notes or takeaways).