docs(tools-integrations): add vids to pages (#3625)

docs/docs/tools-and-integrations/cypress.mdx

@@ -23,6 +23,13 @@ image: https://res.cloudinary.com/djwdcmwdz/image/upload/v1698686403/docs/Blog_T
 
 Cypress is currently one of the top end to end testing frameworks, it is a great tool in its own right that allows you to replicate most of the production challenges you might encounter by allowing developers to test the system from the user perspective. But, as with all of the tools that only test the UI portion application, you can only run validations against what the user would see while going through the flows.
 
+:::info 
+Check out the hands-on tutorial on YouTube!
+
+<iframe width="100%" height="250" src="https://www.youtube.com/embed/yDXoa8znTQQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+
+:::
+
 ## How It Works
 
 The following is a high-level sequence diagram of how Cypress and Tracetest interact with the different pieces of the system.

docs/docs/tools-and-integrations/playwright.mdx

@@ -23,6 +23,13 @@ image: https://res.cloudinary.com/djwdcmwdz/image/upload/v1698686403/docs/Blog_T
 
 The Tracetest integration for Playwright enables your current Playwright tests to easily capture a full distributed trace from your OpenTelemetry instrumented frontend and backend system. You can embed a Tracetest in this Playwright test, and allow trace-based testing assertions to be applied across this entire flow, enabling true end-to-end tests across your entire system.
 
+:::info
+Check out the hands-on tutorial on YouTube!
+
+<iframe width="100%" height="250" src="https://www.youtube.com/embed/Wv38LNleUpE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+
+:::
+
 ## How It Works
 
 The following is a high-level sequence diagram of how Playwright and Tracetest interact with the different pieces of the system.

docs/docs/tools-and-integrations/typescript.mdx

@@ -27,6 +27,13 @@ JavaScript/TypeScript is today the most popular language for web development, an
 When working with testing tools, the most important thing is to be able to integrate them into your existing workflow and tooling. This is why we have created the `@tracetest/client` NPM package, which allows you to use the Tracetest platform to run trace-based tests from your existing JavaScript/TypeScript code.
 Enabling you to run tests at any point in your code, and not only at the end of the test run, allows you to use trace-based testing as a tool to help you develop your application.
 
+:::info
+Check out the hands-on tutorial on YouTube!
+
+<iframe width="100%" height="250" src="https://www.youtube.com/embed/BOMjkiwyRzc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+
+:::
+
 ## The `@tracetest/client` NPM Package
 
 With the [`@tracetest/client` NPM Package](https://www.npmjs.com/package/@tracetest/client), you will unlock the power of OpenTelemetry that allows you to run deeper testing based on the traces and spans generated by each of the checkpoints that you define within your services.