Merge pull request #86 from checkly/guolau/fix-broken-video-embeds

stefanjudis · web-flow · commit cb58892bf83c · 2025-10-28T09:20:31.000+01:00
fix: broken video embeds and refactor existing embeds to use reusable snippet
diff --git a/cli/environment-variables.mdx b/cli/environment-variables.mdx
@@ -4,6 +4,7 @@ description: 'Learn how to use environment variables in your Checkly project'
 sidebarTitle: 'Environment Variables'
 ---
 
+import { YoutubeEmbed } from "/snippets/youtube-embed.jsx"
 
 There are two types of environment variables (env vars) in the Checkly CLI context.
 
@@ -12,14 +13,7 @@ There are two types of environment variables (env vars) in the Checkly CLI conte
 
 To get a quick overview of when to use which, checkout this video 👇
 
-<iframe
-  className="w-full aspect-video rounded-xl"
-  src="https://www.youtube.com/embed/nEIOBRSbjAk"
-  title="YouTube video player"
-  frameBorder="0"
-  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-  allowFullScreen
-></iframe>
+<YoutubeEmbed id="nEIOBRSbjAk" title="How to use Checkly local and remote environment variables" />
 
 ## Local Environment Variables
 
diff --git a/detect/synthetic-monitoring/api-checks/set-up-and-tear-down.mdx b/detect/synthetic-monitoring/api-checks/set-up-and-tear-down.mdx
@@ -6,6 +6,7 @@ sidebarTitle: Set Up and Tear Down
 ---
 
 import GenericRuntimeVariablesTable from '/snippets/generic-runtime-variables-table.mdx';
+import { YoutubeEmbed } from "/snippets/youtube-embed.jsx"
 
 Setup and teardown scripts can be used to execute arbitrary JavaScript/TypeScript code before and/or after an API check. 
 Both script types have access to all environment variables, runtime objects like `request` and `response` and popular npm packages
@@ -18,14 +19,7 @@ However, you can also use them [via our web UI](#using-setup-and-teardown-script
 
 Check the video below for a quick overview of using setup and teardown scripts through the web UI and  with the CLI.
 
-<iframe
-  className="w-full aspect-video rounded-xl"
-  src="https://www.youtube.com/embed/38ZXJy-nlvI"
-  title="YouTube video player"
-  frameBorder="0"
-  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-  allowFullScreen
-></iframe> 
+<YoutubeEmbed id="38ZXJy-nlvI" title="Monitor complex API endpoints with Checkly API checks" />
 
 ## Setup scripts
 
diff --git a/detect/synthetic-monitoring/browser-checks/visual-regressions.mdx b/detect/synthetic-monitoring/browser-checks/visual-regressions.mdx
@@ -4,6 +4,8 @@ description: 'Visual monitoring for more consistent UIs and complex assertions'
 sidebarTitle: 'Visual Monitoring'
 ---
 
+import { YoutubeEmbed } from "/snippets/youtube-embed.jsx"
+
 Playwright Test gives you the ability to do visual regression testing and snapshot testing. With Checkly, you can run these tests 
 against production, 24x7. 
 
@@ -13,7 +15,7 @@ core screens on production.
 
 Have a look at this video for a quick explainer:
 
-<Youtube id="uTm40YOtj_g" />
+<YoutubeEmbed id="uTm40YOtj_g" title="Add Visual Regression Testing to your Synthetic Monitoring" />
 
 The TL;DR is that you can:
 
diff --git a/guides/auto-waiting-methods.mdx b/guides/auto-waiting-methods.mdx
@@ -8,6 +8,7 @@ tags:
 ---
 
 import PlaywrightCheckSuiteTryOut from "/snippets/playwright-check-suite-tryout.mdx"
+import { YoutubeEmbed } from "/snippets/youtube-embed.jsx"
 
 <PlaywrightCheckSuiteTryOut />
 
@@ -209,17 +210,7 @@ A full walkthrough of the code changes is [on our documentation site](/detect/sy
 
 To see a demo of how this state works in Checkly, take a look at Stefan’s tutorial video:
 
-<Frame>
-  <iframe
-    src="https://www.youtube.com/embed/kzQu0Y_Nxjk"
-    width="560"
-    height="315"
-    title="Degraded states in checkly"
-    frameborder="0"
-    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-    allowfullscreen
-  />
-</Frame>
+<YoutubeEmbed id="kzQu0Y_Nxjk" title="Get alerted when your Playwright checks degrade in performance" />
 
 ## 3. Monitor network traffic with `waitForResponse`
 
@@ -265,17 +256,7 @@ A note on code reading: for myself, and many other users on Stack Overflow, it's
 
 See response body waiting in action as demonstrated by Stefan here:
 
-<Frame>
-  <iframe
-    src="https://www.youtube.com/embed/5CER0dKweyw"
-    width="560"
-    height="315"
-    title="Response body waiting in Playwright"
-    frameborder="0"
-    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-    allowfullscreen
-  />
-</Frame>
+<YoutubeEmbed id="5CER0dKweyw" title="How to wait for a specific API response in your Playwright end-to-end tests" />
 
 ## 4. Implement your own auto-waiting and retry mechanism
 
@@ -306,17 +287,7 @@ This approach won't fix the application's UI/UX issues but allows you to "work a
 
 Stefan explains it in detail on YouTube if you want to learn more about this approach.
 
-<Frame>
-  <iframe
-    src="https://www.youtube.com/embed/8g7FvoRToGo"
-    width="560"
-    height="315"
-    title="Avoid flaky end-to-end tests due to poorly hydrated Frontends with Playwright's toPass()"
-    frameborder="0"
-    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-    allowfullscreen
-  />
-</Frame>
+<YoutubeEmbed id="8g7FvoRToGo" title="Avoid flaky end-to-end tests due to poorly hydrated Frontends with Playwright's toPass()" />
 
 ## Conclusions
 
diff --git a/guides/claude-code-monitoring.mdx b/guides/claude-code-monitoring.mdx
@@ -8,6 +8,9 @@ avatar: 'images/avatars/nica-mellifera.png'
 tags:
   - AI
 ---
+
+import { YoutubeEmbed } from "/snippets/youtube-embed.jsx"
+
 AI-assisted coding promises to massively upgrade developer productivity, and with Checkly's model of [Monitoring as Code](https://www.checklyhq.com/blog/monitoring-as-code-in-your-sdlc/), you can create monitoring coverage for all your services in minutes instead of days. This guide will show you how to create an AI development environment that lets you create and deploy several types of Checkly monitoring.
 
 ## Setup
@@ -392,11 +395,4 @@ To learn more about Checkly's capabilities, explore these resources:
 
 For more tutorials and advanced use cases, visit the [Checkly YouTube channel](https://www.youtube.com/@ChecklyHQ), where you can see great tutorials like this guide to the Playwright MCP server:
 
-<iframe
-  className="w-full aspect-video rounded-xl"
-  src="https://www.youtube.com/embed/MIlcVo1x3Is"
-  title="Generating Playwright Tests With AI: Let's Try the New Playwright MCP Server!"
-  frameBorder="0"
-  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-  allowFullScreen
-></iframe>
+<YoutubeEmbed id="MIlcVo1x3Is" title="Generating Playwright Tests With AI: Let's Try the New Playwright MCP Server!" />
diff --git a/guides/developer-fixtures.mdx b/guides/developer-fixtures.mdx
@@ -8,6 +8,7 @@ sidebarTitle: Testing Fixtures
 ---
 
 import PlaywrightCheckSuiteTryOut from "/snippets/playwright-check-suite-tryout.mdx"
+import { YoutubeEmbed } from "/snippets/youtube-embed.jsx"
 
 <PlaywrightCheckSuiteTryOut />
 
@@ -155,16 +156,7 @@ In this example, we've just put our fixtures at the top of a single check's file
 ### See it in action: Reuse Playwright Code across Files and Tests with Fixtures
 To see fixtures demonstrated, and a step-by-step explanation of the code, check out [Stefan's tutorial video](https://www.youtube.com/watch?v=2O7dyz6XO2s&list=PLMZDRUOi3a8N067UNvkxXEThKlTII_OJ-&index=5):
 
-<Frame>
-  <iframe
-    src="https://www.youtube.com/embed/2O7dyz6XO2s"
-    width="560"
-    height="315"
-    frameborder="0"
-    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-    allowfullscreen
-  />
-</Frame>
+<YoutubeEmbed id="2O7dyz6XO2s" title="Reuse Playwright Code across Files and Tests with Fixtures" />
 
 ## Running standardized code across every check
 While it's useful to package up tasks like logging in across multiple tests, we may want some code to run before and after every single check. Some possible examples:
@@ -213,16 +205,7 @@ import { expect } from '@playwright/test';
 ### See it in action: running code before and after every check
 To see this demonstrated, and a step-by-step explanation of the fixture code, check out [Stefan's tutorial video](https://www.youtube.com/watch?v=hegZS46J0rA&list=PLMZDRUOi3a8N067UNvkxXEThKlTII_OJ-&index=1):
 
-<Frame>
-  <iframe
-    src="https://www.youtube.com/embed/hegZS46J0rA"
-    width="560"
-    height="315"
-    frameborder="0"
-    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-    allowfullscreen
-  />
-</Frame>
+<YoutubeEmbed id="hegZS46J0rA" title="Add global beforeEach / afterEach hooks using Playwright automatic fixtures" />
 
 Here's our [complete YouTube playlist on fixtures](https://www.youtube.com/playlist?list=PLMZDRUOi3a8N067UNvkxXEThKlTII_OJ-).
 
diff --git a/guides/monitoring-ecommerce-apps-using-playwright.mdx b/guides/monitoring-ecommerce-apps-using-playwright.mdx
@@ -7,6 +7,7 @@ tags: Playwright
 
 import CliAuth from '/snippets/cli-auth.mdx';
 import CliProjectInit from '/snippets/cli-project-init.mdx';
+import { YoutubeEmbed } from "/snippets/youtube-embed.jsx"
 
 ## Inspired by Infrastructure-as-Code and E2E-Testing
 
@@ -35,17 +36,7 @@ What does one gain when moving from a manual to a monitoring as code approach? T
 
 Watch our launch event to learn more about our CLI:
 
-<Frame>
-  <iframe
-    src="https://www.youtube.com/embed/IcaMW2opx2U"
-    width="560"
-    height="315"
-    title="monitoring as code launch event video"
-    frameborder="0"
-    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-    allowfullscreen
-  />
-</Frame>
+<YoutubeEmbed id="IcaMW2opx2U" title="The new Era of Monitoring as Code" />
 
 ## Monitoring as Code with Checkly
 
diff --git a/learn/playwright/codegen.mdx b/learn/playwright/codegen.mdx
@@ -14,13 +14,12 @@ learn_playwright:
 ---
 
 import PlaywrightCheckSuiteTryOut from "/snippets/playwright-check-suite-tryout.mdx"
+import { YoutubeEmbed } from "/snippets/youtube-embed.jsx"
 
 <PlaywrightCheckSuiteTryOut />
 
 Did you know that you can use Playwright to generate your automation scripts automatically? Let's dive into how you can leverage Playwright's `codegen` feature to record scripts effortlessly.
 
-
-
 ### Step 1: Launch Playwright Codegen
 
 To get started, you'll use the `codegen` command from the Playwright executable. Let's say you want to create a script for interacting with [Checkly](https://checklyhq.com/). You would run the following command in your terminal:
@@ -125,8 +124,7 @@ You’ll also notice in the screenshot that the inspector automatically adds a `
 
 To see the highly visual codegen tool in action, check out Stefan’s video below:
 
-
-
+<YoutubeEmbed id="O-uS5wKKB30" title="How to record automation scripts using Playwright Codegen" />
 
 ### Go further with Playwright
 
diff --git a/learn/playwright/how-to-detect-broken-links.mdx b/learn/playwright/how-to-detect-broken-links.mdx
@@ -14,6 +14,7 @@ learn_playwright:
 ---
 
 import PlaywrightCheckSuiteTryOut from "/snippets/playwright-check-suite-tryout.mdx"
+import { YoutubeEmbed } from "/snippets/youtube-embed.jsx"
 
 <PlaywrightCheckSuiteTryOut />
 
@@ -23,7 +24,7 @@ Let's unveil some links going nowhere!
 
 If you prefer the video version of this tutorial, check the video below, and if you're only here to copy and paste a final implementation, find the final code on GitHub.
 
-
+<YoutubeEmbed id="EJJ_PYK8YiM" title="How to detect broken links with Playwright Test" />
 
 ## Let's break down the problem
 
diff --git a/learn/playwright/how-to-parameterize-playwright-projects.mdx b/learn/playwright/how-to-parameterize-playwright-projects.mdx
@@ -14,6 +14,7 @@ learn_playwright:
 ---
 
 import PlaywrightCheckSuiteTryOut from "/snippets/playwright-check-suite-tryout.mdx"
+import { YoutubeEmbed } from "/snippets/youtube-embed.jsx"
 
 <PlaywrightCheckSuiteTryOut />
 
@@ -35,7 +36,7 @@ Let me show in this article how to implement options to configure fixtures, page
 
 If you prefer video, here's a recording explaining the same concepts.
 
-
+<YoutubeEmbed id="rRmfYu8hlbw" title="How to parameterize and configure your custom Playwright fixtures" />
 
 ## Why fixtures enable clean Playwright projects
 
diff --git a/learn/playwright/steps-decorators.mdx b/learn/playwright/steps-decorators.mdx
@@ -14,6 +14,7 @@ learn_playwright:
 ---
 
 import PlaywrightCheckSuiteTryOut from "/snippets/playwright-check-suite-tryout.mdx"
+import { YoutubeEmbed } from "/snippets/youtube-embed.jsx"
 
 <PlaywrightCheckSuiteTryOut />
 
@@ -29,7 +30,7 @@ More importantly, though, TypeScript is the better choice when planning to maint
 
 A few days ago, I found another TypeScript feature that allows me to **structure complex end-to-end tests with test steps while writing less code**. Doesn't this sound exciting?
 
-
+<YoutubeEmbed id="of1v9cycTdQ" title="Apply Playwright test steps with TypeScript decorators" />
 
 Let me show you how you can replace repetitive `test.step` calls with a single `@step` decorator. Let's go!
 
diff --git a/learn/playwright/testing-apis.mdx b/learn/playwright/testing-apis.mdx
@@ -14,11 +14,14 @@ learn_playwright:
 ---
 
 import PlaywrightCheckSuiteTryOut from "/snippets/playwright-check-suite-tryout.mdx"
+import { YoutubeEmbed } from "/snippets/youtube-embed.jsx"
 
 <PlaywrightCheckSuiteTryOut />
 
 You probably know that Microsoft’s Playwright is a solid tool for end-to-end testing, enabling you to control headless browsers and check essential user flows. But did you know that you can also use Playwright for API testing? If you didn’t, then this guide is for you.
 
+<YoutubeEmbed id="vuabXC46KkM" title="How to test and monitor your APIs with Playwright" />
+
 In this post, we’ll explore how Playwright can be used to test a GraphQL API (but don’t worry if you’re using REST; Playwright can handle any HTTP-based API). Let's dive into an example using the countries.trevorblades.com GraphQL API.
 
 ## Our demo GraphQL API
diff --git a/learn/playwright/testing-in-parallel.mdx b/learn/playwright/testing-in-parallel.mdx
@@ -14,6 +14,7 @@ learn_playwright:
 ---
 
 import PlaywrightCheckSuiteTryOut from "/snippets/playwright-check-suite-tryout.mdx"
+import { YoutubeEmbed } from "/snippets/youtube-embed.jsx"
 
 <PlaywrightCheckSuiteTryOut />
 
@@ -186,4 +187,4 @@ Choosing between parallel and sequential execution in Playwright tests hinges on
 
 Over on [the Checkly YouTube channel](https://www.youtube.com/checklyhq), Stefan gets hands-on with Playwright test Parallelism and execution modes:
 
-
+<YoutubeEmbed id="8NIm1QCUXE0" title='How to Run Playwright Test in "Parallel," "Serial," or "Default" Mode' />
diff --git a/learn/playwright/testing-pyramid.mdx b/learn/playwright/testing-pyramid.mdx
@@ -15,6 +15,7 @@ learn_playwright:
 ---
 
 import PlaywrightCheckSuiteTryOut from "/snippets/playwright-check-suite-tryout.mdx"
+import { YoutubeEmbed } from "/snippets/youtube-embed.jsx"
 
 <PlaywrightCheckSuiteTryOut />
 
@@ -207,4 +208,4 @@ Ultimately, the goal is not to rigidly categorize tests but to ensure comprehens
 
 In a recent Webinar, the Checkly team got to talk about how the Testing Pyramid affects testing strategies for real world applications like React apps. Watch the whole session here:
 
-
+<YoutubeEmbed id="Ev7l5atRfFw" title="Test and Monitor React/Next.js Apps with Playwright" />
diff --git a/snippets/youtube-embed.jsx b/snippets/youtube-embed.jsx
@@ -0,0 +1,34 @@
+export const YoutubeEmbed = ({
+  id, // The video id
+  allowFullScreen = true, // Whether the iframe element can activate full screen mode
+  end, // The time, measured in seconds from the start of the video, when the player should stop playing the video.
+  loading = "eager", // The loading attribute of the iframe element.
+  start, // The time, measured in seconds from the start of the video, when the player should start playing the video.
+  title = "YouTube video", // The title attribute of the iframe element. Defaults to "YouTube video".
+}) => {
+  // Validation
+  if (!id) {
+    console.error("YouTube component requires an id prop");
+  }
+
+  // Build URL parameters
+  const params = new URLSearchParams();
+  
+  // Add time parameters if provided
+  if (start) params.append("start", start.toString());
+  if (end) params.append("end", end.toString());
+  
+  // Construct the embed URL
+  const src = `https://www.youtube.com/embed/${id}?${params.toString()}`;
+
+  return (
+    <iframe
+      src={src}
+      title={title}
+      loading={loading}
+      className="w-full aspect-video rounded-xl"
+      allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+      allowFullScreen={allowFullScreen}
+    />
+  );
+};
