cherry-pick(#32164): docs: release video and trace viewer video (#32173)

This PR cherry-picks the following commits:

- f927495

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>

docs/src/release-notes-js.md

@@ -8,9 +8,15 @@ import LiteYouTube from '@site/src/components/LiteYouTube';
 
 ## Version 1.46
 
+<LiteYouTube
+  id="tQo7w-QQBsI"
+  title="Playwright 1.46"
+/>
+
+
 ### TLS Client Certificates
 
-Playwright now allows to supply client-side certificates, so that server can verify them, as specified by TLS Client Authentication.
+Playwright now allows you to supply client-side certificates, so that server can verify them, as specified by TLS Client Authentication.
 
 The following snippet sets up a client certificate for `https://example.com`:
 

docs/src/trace-viewer-intro-js.md

@@ -16,7 +16,7 @@ Playwright Trace Viewer is a GUI tool that lets you explore recorded Playwright
 - [How to open and view the trace](/trace-viewer-intro.md#opening-the-trace)
 
 <LiteYouTube
-    id="lfxjs--9ZQs"
+    id="yP6AnTxC34s"
     title="Viewing Playwright Traces"
 />
 

docs/src/trace-viewer.md

@@ -13,14 +13,14 @@ Playwright Trace Viewer is a GUI tool that helps you explore recorded Playwright
 * langs: js
 
 <LiteYouTube
-    id="lfxjs--9ZQs"
+    id="yP6AnTxC34s"
     title="Viewing Playwright Traces"
 />
 
 ## Trace Viewer features
 ### Actions
 
-In the Actions tab you can see what locator was used for every action and how long each one took to run. Hover over each action of your test and visually see the change in the DOM snapshot. Go back and forward in time and click an action to inspect and debug. Use the Before and After tabs to visually see what happened before and after the action. 
+In the Actions tab you can see what locator was used for every action and how long each one took to run. Hover over each action of your test and visually see the change in the DOM snapshot. Go back and forward in time and click an action to inspect and debug. Use the Before and After tabs to visually see what happened before and after the action.
 
 ![actions tab in trace viewer](https://github.com/microsoft/playwright/assets/13063165/948b65cd-f0fd-4c7f-8e53-2c632b5a07f1)
 
@@ -31,7 +31,7 @@ In the Actions tab you can see what locator was used for every action and how lo
 
 ### Screenshots
 
-When tracing with the [`option: screenshots`] option turned on (default), each trace records a screencast and renders it as a film strip. You can hover over the film strip to see a magnified image of for each action and state which helps you easily find the action you want to inspect. 
+When tracing with the [`option: screenshots`] option turned on (default), each trace records a screencast and renders it as a film strip. You can hover over the film strip to see a magnified image of for each action and state which helps you easily find the action you want to inspect.
 
 Double click on an action to see the time range for that action. You can use the slider in the timeline to increase the actions selected and these will be shown in the Actions tab and all console logs and network logs will be filtered to only show the logs for the actions selected.
 
@@ -393,7 +393,7 @@ public class ExampleTest : PageTest
     [TearDown]
     public async Task TearDown()
     {
-        var failed = TestContext.CurrentContext.Result.Outcome == NUnit.Framework.Interfaces.ResultState.Error 
+        var failed = TestContext.CurrentContext.Result.Outcome == NUnit.Framework.Interfaces.ResultState.Error
             || TestContext.CurrentContext.Result.Outcome == NUnit.Framework.Interfaces.ResultState.Failure;
 
         await Context.Tracing.StopAsync(new()
@@ -402,7 +402,7 @@ public class ExampleTest : PageTest
                 TestContext.CurrentContext.WorkDirectory,
                 "playwright-traces",
                 $"{TestContext.CurrentContext.Test.ClassName}.{TestContext.CurrentContext.Test.Name}.zip"
-            ) : null, 
+            ) : null,
         });
     }