Adding "read the transcript" functionality to Video player and Iframe components

[NickHaggerty1]

To handle the need for having readable transcript content for videos, we would like to add an additional element to the video and iframe components.

Editors should have an option to able to copy in supplied transcript content to both components.
Perhaps editors toggle on/activate Transcript, and have additional text box element (with usual bold/italic/subscript/super etc)
The component should display under video (for both components) below the caption.

13.6.24.
Transcript button

1. Concluded to create a modal element to contain the transcript.
2. Text component in place within the modal so editors can add transcribed text
3. Behaviour of component use inspiration from Apple example: https://www.apple.com/environment/ (click on + in components)

• Sticky close button following the scroll
• Overlays the page
• Scroll happens within the modal until this is closed and user returns to page

4. Button option should be added to both iframe and video
5. Modal could be used to solve future elements with more rich content within

13.6.24
Additional tasks for video and iframe (maybe separate card or related to transcript button addition?)
Test page:
https://studiov3-global-development-equinor-web-sites-dev.c2.radix.equinor.com/global-development/desk/topicContent;76c8f30b-b374-4a7c-b49d-24f8cc0a7ce2

1. link/cta button on video appears above the player (even though description says it would appear below)
2. Button consistency between Iframe and Video components. Iframe is correct now (white/blue frame)
3. Add optional description field to video component to replicate the iframe set up

[padms]

@NickHaggerty1 Could you share us the sketches for the transcript dialog and the placement of the transcript button for the video players and iframes ( including the scrollable ones) , considering these components already have the optional button link.

The text on the button can be common, we can alter the button text for screen readers similar to the way we handle the buttons on the event cards.

[NickHaggerty1]

@padms @meols Hey. Im not sure we concluded on how to solve this? So I havent made any sketches for this. WIll have a discussion with Mette and then update

[NickHaggerty1]

Hey @padms @meols @BorghildSelle I have updated the task list a bit. Looking at the stage page linked above see some differences in set up and look and feel between Iframe and video component so be good to address these too but maybe move to a separate card

[NickHaggerty1]

I have made a sketch as a start in figma on the "video transcribe/modal page" Open to discuss button choice set up and how to indicate that it opens a modal but like the + design

[padms]

@meols @NickHaggerty1 This is ready for test. I have added the option for the transcript for both the iframes and videos. For videos the transcript textbox is provided in the video asset file. For the iframes, the transcript textbox is provided in the iframe component.

[padms]

@meols @NickHaggerty1 I have added the transcript textbox near the video asset, do you need option to enter multiple translations for a single video asset?

[meols]

@padms - let's deploy this version and discuss later if we should have more translations.