MM-64483 YouTube Preview UI Update (#31288)

* fix youtube thumbnails

* fix lint issues, update snapshots

* Update _videos.scss

* Update _videos.scss

* revert change to 'YouTubeVideo' to 'YoutubeVideo'

* switch back to Youtube instead of YouTube

* accessibility fixes -add focus state

* fix lint issues

* Update youtube_video.test.tsx.snap

* remove logic for delaying different aspect ratios. always use 16:9

* Update _videos.scss

* fix rounded corners

* use css variables for radius

* restore attributes from original, remove bottom margin from player to prevent vertical shift

* fix issue with margin and nested 'video-div' elements

* update class to 'video-playing'

* fix linter issues

* address copilot review feedback and remove unused css

* Update youtube_video.test.tsx

* fixed failing test

* lint issue fix

* Update youtube_video.test.tsx

* review feedback changes

* Update _videos.scss

* update test and snapshot

* fix lint issues

* add scaling button on hover state back in

* feat: Make YouTube video component strings translatable

- Add useIntl import and formatMessage usage
- Create YouTubePrefix component for internationalized prefix
- Update YouTubeThumbnail component to use translatable strings
- Add translation IDs:
  - youtube_video.play.aria_label
  - youtube_video.thumbnail.alt_text  
  - youtube_video.play_button.aria_label
  - youtube_video.type

Addresses reviewer feedback to make hardcoded strings translatable
using React Intl's useIntl hook.

Co-authored-by: Matthew Birtch <matthewbirtch@users.noreply.github.com>

* fix lint issues

* Update en.json

* Update youtube_video.test.tsx.snap

* remove youtube prefix

* fix lint issues

* Update youtube_video.test.tsx.snap

* fix lint issue

---------

Co-authored-by: claude[bot] <209825114+claude[bot]@users.noreply.github.com>
Co-authored-by: Matthew Birtch <matthewbirtch@users.noreply.github.com>

e2e-tests/cypress/tests/integration/channels/files_and_attachments/youtube_video_spec.js

@@ -37,7 +37,7 @@ describe('YouTube Video', () => {
             cy.get('.play-button', {timeout: TIMEOUTS.TEN_SEC}).click();
 
             // * Video should be loaded in the iframe
-            cy.get('.video-div > iframe').should('exist');
+            cy.get('.video-playing iframe').should('exist');
 
             // # Collapse video
             cy.get('.post__embed-visibility').click();
@@ -52,7 +52,7 @@ describe('YouTube Video', () => {
             cy.get('.play-button').should('exist');
 
             // * Video should not be played in the iframe
-            cy.get('.video-div > iframe').should('not.exist');
+            cy.get('.video-playing iframe').should('not.exist');
         });
     });
 });