Migrate embedded videos

.github/instructions/docs-writing.instructions.md

@@ -118,7 +118,10 @@ Use the agreed framing to guide the plan, scope, structure, terminology, prerequ
 
 * Use videos only when they add value.
 * Videos have a descriptive and meaningful title that starts with "Video showing" or "Video of" and ends with ".".
-* For embedded videos, you MUST use `youtube-nocookie.com` instead of `youtube.com`.
+* Do not embed YouTube videos with an `iframe`. Use linked-image Markdown with a locally stored thumbnail. The site automatically opens external Markdown links in a new tab.
+* Store blog post thumbnails alongside the Markdown file. For other content, store them in `images/<article-name>/`.
+* The thumbnail alt text is the link's accessible name. It must identify the video and announce that the link opens in a new tab, for example `[![Watch <video description> on YouTube (opens in new tab).](<thumbnail-path>)](<youtube-url>)`.
+* To migrate existing YouTube iframe embeds, run `npm run replace-youtube-embeds -- --write <file-or-directory>`. Omit `--write` to preview the migration.
 
 ## Lists
 

blogs/2016/08/15/introvideos.md

@@ -24,7 +24,7 @@ Navigate to [Intro Videos - Overview](/docs/getstarted/introvideos.md) to get st
 
 Below is the first video covering downloading, installing, and the basics of using VS Code:
 
-<iframe src="https://www.youtube-nocookie.com/embed/LUl_WXt8ohA?rel=0&amp;disablekb=0&amp;modestbranding=1&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
+[![Watch Welcome to VS Code on YouTube (opens in new tab).](youtube-LUl_WXt8ohA.jpg)](https://www.youtube.com/watch?v=LUl_WXt8ohA)
 
 You can see the video outline [here](/docs/introvideos/basics.md) as well as additional introductory learning resources.
 

blogs/2017/11/15/live-share.md

@@ -21,7 +21,7 @@ Live Share enables your team to quickly collaborate on the same codebase without
 
 When it comes to Live Share, seeing is believing.  Watch the following video to get an idea of what we are working on:
 
-<iframe src="https://aka.ms/vsls-video" allowFullScreen frameBorder="0" title="Introducing Visual Studio Live Share"></iframe>
+[![Watch Introducing Visual Studio Live Share on Microsoft Learn (opens in new tab).](video-introducing-live-share.jpg)](https://learn.microsoft.com/shows/visual-studio-connect-event-2017/t254)
 
 When you share a collaborative session, your teammate sees the context of the workspace in their editor. This means your teammate can read the code you shared without having to clone a repo or install any dependencies your code relies on. They can use rich language features to navigate within the code; not only just opening other files as text but using semantic analysis-based navigation like Go to Definition or Peek.
 

blogs/2018/12/04/rich-navigation.md

@@ -15,7 +15,7 @@ Pull requests are a critical collaboration tool for millions of developers every
 
 In September, along with GitHub, [we announced the GitHub Pull Requests extension](https://code.visualstudio.com/blogs/2018/09/10/introducing-github-pullrequests), which enabled developers to review source code in the same place they write it: inside their familiar and highly-customized editor. Today, we're excited to share a sneak peek of a new experience that will further enhance in-editor PR reviews with support for **rich, multi-repository code navigations**.
 
-<iframe src="https://www.youtube-nocookie.com/embed/DAqDEi0fGco?rel=0&amp;disablekb=0&amp;modestbranding=1&amp;showinfo=0" frameborder="0" allowfullscreen title="First look at a rich code navigation experience"></iframe>
+[![Watch First look at a rich code navigation experience on YouTube (opens in new tab).](youtube-DAqDEi0fGco.jpg)](https://www.youtube.com/watch?v=DAqDEi0fGco)
 
 ## Say goodbye to superficial reviews
 

blogs/2019/05/02/remote-development.md

@@ -78,7 +78,7 @@ Commands and extensions are run directly in the Linux distro, so you don't have
 
 Check out this quick, 2-minute video to see how easy it is to develop in WSL.
 
-<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/mIHprjsSO9o" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen title="Visual Studio Code WSL"></iframe>
+[![Watch Visual Studio Code WSL on YouTube (opens in new tab).](youtube-mIHprjsSO9o.jpg)](https://www.youtube.com/watch?v=mIHprjsSO9o)
 
 For more information, please see the [Developing in WSL](https://aka.ms/vscode-remote/wsl) documentation.
 
@@ -96,7 +96,7 @@ You could use Vim over SSH or Jupyter Notebooks to edit your remote code, but yo
 
 Check out this quick, 2-minute video to see how easy it is to develop on a virtual machine over SSH.
 
-<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/rh1Ag41J6IA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen title="Visual Studio Code Remote - SSH"></iframe>
+[![Watch Visual Studio Code Remote - SSH on YouTube (opens in new tab).](youtube-rh1Ag41J6IA.jpg)](https://www.youtube.com/watch?v=rh1Ag41J6IA)
 
 For more information, please see the [Developing using SSH](https://aka.ms/vscode-remote/ssh) documentation.
 
@@ -112,7 +112,7 @@ A `devcontainer.json` file can be used to tell VS Code how to configure the deve
 
 Check out this quick, 2-minute video to see Development Containers in action.
 
-<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/TVcoGLL6Smo" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen title="Visual Studio Code Dev Containers"></iframe>
+[![Watch Visual Studio Code Dev Containers on YouTube (opens in new tab).](youtube-TVcoGLL6Smo.jpg)](https://www.youtube.com/watch?v=TVcoGLL6Smo)
 
 For more information on development containers, please see the [Developing inside a Container](https://aka.ms/vscode-remote/containers) documentation as well as the [vscode-remote-try-* repositories](https://github.com/search?q=org%3AMicrosoft+vscode-remote-try-&unscoped_q=vscode-remote-try-) that contain samples you can use today.
 

blogs/2020/05/06/github-issues-integration.md

@@ -59,7 +59,7 @@ To fit more workflows, there are several options you can configure. If your flow
 
 You can watch this **What every GitHub user should know about VS Code** talk from [GitHub Satellite](https://githubsatellite.com) by Sana Ajani, [@sana_ajani](https://twitter.com/sana_ajani), and Burke Holland, [@burkeholland](https://twitter.com/burkeholland).
 
-<iframe src="https://www.youtube-nocookie.com/embed/T6sW1Dk9B4E?rel=0&amp;disablekb=0&amp;modestbranding=1&amp;showinfo=0" frameborder="0" allowfullscreen title="What every GitHub user should know about VS Code"></iframe>
+[![Watch What every GitHub user should know about VS Code on YouTube (opens in new tab).](youtube-T6sW1Dk9B4E.jpg)](https://www.youtube.com/watch?v=T6sW1Dk9B4E)
 
 ---
 

blogs/2021/06/02/build-2021.md

@@ -25,13 +25,13 @@ Among all the sessions that were presented, here is a hand-picked selection for
 
 Join Sana Ajani and Jeffrey Mew for some of the newest features of VS Code, including new debugging and testing features, custom notebooks, better support for Python, PyTorch, and Jupyter Notebooks.
 
-<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/eKJftIqv8Uo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+[![Watch What's new in Visual Studio Code | BRK212 on YouTube (opens in new tab).](youtube-eKJftIqv8Uo.jpg)](https://www.youtube.com/watch?v=eKJftIqv8Uo)
 
 ### Application development with Scott Hanselman & friends
 
 Why did this "not a keynote" keynote get so many rave reviews? Find out for yourself, and learn about what's new for developers from Microsoft, including with VS Code: custom notebooks, GitHub integration, GitHub Codespaces, and more.
 
-<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/EWYYgEkGJfs" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+[![Watch Application Development with Scott Hanselman & Friends | KEY11D on YouTube (opens in new tab).](youtube-EWYYgEkGJfs.jpg)](https://www.youtube.com/watch?v=EWYYgEkGJfs)
 
 ### What's new with TypeScript
 
@@ -51,13 +51,13 @@ VS Code developer Christof Marti gives a brief demo of developing in a container
 
 [Dapr](https://dapr.io/) is a distributed application runtime to build microservice-based apps and works with any programming language. Check out Dapr and how it is used with VS Code.
 
-<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/DyKYB76SDx0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+[![Watch Microservices made easy with Dapr | OD521 on YouTube (opens in new tab).](youtube-DyKYB76SDx0.jpg)](https://www.youtube.com/watch?v=DyKYB76SDx0)
 
 ### Build cloud-native applications that run anywhere
 
 Use VS Code and Azure to build, debug, and run serverless or containerized apps.
 
-<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/jN2INtCLRTo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+[![Watch Build cloud-native applications that run anywhere | TS03 on YouTube (opens in new tab).](youtube-jN2INtCLRTo.jpg)](https://www.youtube.com/watch?v=jN2INtCLRTo)
 
 ## Learn new skills
 
@@ -67,19 +67,19 @@ This year's Build had a large "student zone", for beginners and perennial learne
 
 Learn how VS Code and GitHub can help student and beginning programmers learn to code. Hosted by Sana Ajani, from the VS Code team, and Meaghan Lewis.
 
-<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/Jk708pQJSyk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+[![Watch Core tools for a dev career: an introduction to Visual Studio Code and GitHub | CON068 on YouTube (opens in new tab).](youtube-Jk708pQJSyk.jpg)](https://www.youtube.com/watch?v=Jk708pQJSyk)
 
 ### The art of artificial intelligence: creating images with Python and Azure
 
 Learn how to use AI to generate images and photos, with Python and Jupyter Notebooks in VS Code.
 
-<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/WyAikmxLlhs" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+[![Watch The art of artificial intelligence: creating images with Python and Azure | CON070 on YouTube (opens in new tab).](youtube-WyAikmxLlhs.jpg)](https://www.youtube.com/watch?v=WyAikmxLlhs)
 
 ### Get started with popular programming languages: Intro to Python and C#
 
 James Montemagno and Christopher Harrison offer a beginner-friendly introduction to programming in C# and Python, and of course using VS Code.
 
-<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/wiUzCG_mEGo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+[![Watch Get started with popular programming languages: Intro to Python and C# | CON069 on YouTube (opens in new tab).](youtube-wiUzCG_mEGo.jpg)](https://www.youtube.com/watch?v=wiUzCG_mEGo)
 
 ## Reach out
 

blogs/2021/11/08/custom-notebooks.md

@@ -74,7 +74,7 @@ For both of these notebooks, it was great to have the VS Code Notebook UI to cre
 
 The VS Code team recorded a livestream several months ago about custom notebooks and in it, I showcased in a live coding demo of what it's like to create a custom notebook extension. You can watch it on YouTube: [VS Code Notebooks: A Deep Dive](https://youtu.be/D-AXZZDTQhM). Some of the Notebook APIs have changed since the video was published but the principles are still the same.
 
-<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/D-AXZZDTQhM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+[![Watch VS Code Notebooks: A Deep Dive on YouTube (opens in new tab).](youtube-D-AXZZDTQhM.jpg)](https://www.youtube.com/watch?v=D-AXZZDTQhM)
 
 For the most up to date and detailed information when you're ready to build your own notebook extension, you can reference the [Notebook extension authors guide](/api/extension-guides/notebook.md).
 

blogs/2024/12/18/free-github-copilot.md

@@ -115,7 +115,7 @@ No more commits that say "changes". GitHub Copilot will suggest a commit message
 
 Every VS Code extension can tie directly into the GitHub Copilot APIs and offer a customized AI experience. Check out MongoDB with [their extension](https://marketplace.visualstudio.com/items?itemName=mongodb.mongodb-vscode) that can write impressively complex queries, use fuzzy search and a lot more...
 
-<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/MLWlWrRAb4w?si=FzYwY_lOLUlfOmQ7" title="VS Code MongoDB extension" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+[![Watch VS Code MongoDB extension on YouTube (opens in new tab).](youtube-MLWlWrRAb4w.jpg)](https://www.youtube.com/watch?v=MLWlWrRAb4w)
 
 **Try this:** Build your own extension for GitHub Copilot using GitHub Copilot! We've created some new tutorials that show you how to [build a code tutor chat participant](https://code.visualstudio.com/api/extension-guides/chat-tutorial) or [generate AI-powered code annotations](https://code.visualstudio.com/api/extension-guides/language-model-tutorial).
 

blogs/2025/05/12/agent-mode-meets-mcp.md

@@ -16,7 +16,7 @@ When we first introduced [agent mode](https://code.visualstudio.com/docs/agents/
 
 Our first attempt followed the familiar VS Code pattern: extensibility through the [Tools](https://code.visualstudio.com/api/extension-guides/tools) and [Chat participants](https://code.visualstudio.com/api/extension-guides/chat) APIs. This made sense given the thousands of extensions already in the ecosystem, but the industry was moving quickly toward a new standard: the [Model Context Protocol](https://modelcontextprotocol.io/) (MCP). MCP is best understood as a protocol for connecting AI agents to a wide range of external tools and services in a consistent way, much like how HTTP standardized communication for the web. The goal is to let any client, not just VS Code, plug in powerful tool servers like databases, code search, and deployment systems, and have them “just work.”
 
-<iframe width="560" height="315" src="https://www.youtube-nocookie.com//embed/VePxCcF99w4?si=vY-f4CKc0rrl5fDa&start=165" title="Agent mode tools in VS Code" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+[![Watch Agent mode tools in VS Code on YouTube (opens in new tab).](youtube-VePxCcF99w4.jpg)](https://www.youtube.com/watch?v=VePxCcF99w4)
 
 This shift to MCP unlocked a wider ecosystem almost overnight. Now, VS Code users can take advantage of servers like [Playwright MCP Server](https://github.com/microsoft/playwright-mcp) for frontend verification, [GitHub MCP Server](https://github.com/github/github-mcp-server/) for repository insights and pull requests, or [Context7](https://github.com/upstash/context7/) for smarter API usage. The [list of servers](https://github.com/modelcontextprotocol/servers) continues to grow, and MCP has quickly become a foundation for bringing additional capabilities across AI agents.
 

blogs/2025/05/27/ai-and-remote.md

@@ -18,7 +18,7 @@ Now combine those capabilities with the flexibility and power of AI in VS Code,
 
 In this blog, we'll explore how your existing remote setups can be enhanced to "just work" with AI, along with some more customized AI + remote workflows that include custom instructions, chat participants, and agent auto-approvals.
 
-<iframe width="560" height="315" src="https://www.youtube-nocookie.com//embed/ErYP9LRo7e0?si=1zYHow_2ivCc0jzd" title="AI and Remote Development in VS Code" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+[![Watch AI and Remote Development in VS Code on YouTube (opens in new tab).](youtube-ErYP9LRo7e0.jpg)](https://www.youtube.com/watch?v=ErYP9LRo7e0)
 
 ## What is Remote Development?
 

blogs/2025/10/22/bring-your-own-key.md

@@ -18,7 +18,7 @@ In March, we released the [bring your own key (BYOK)](https://code.visualstudio.
 
 Now, we're taking BYOK to the next level. In the [v1.104 release](https://code.visualstudio.com/updates/v1_104), we introduced the [Language Model Chat Provider API](https://code.visualstudio.com/api/extension-guides/ai/language-model-chat-provider) that enables model providers to contribute their models directly through VS Code extensions.
 
-<iframe width="560" height="315" src="https://www.youtube-nocookie.com//embed/xXFTlPZJJoo?si=UrgdYjNbOzVbSysl" title="BYOK in VS Code" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+[![Watch BYOK in VS Code on YouTube (opens in new tab).](youtube-xXFTlPZJJoo.jpg)](https://www.youtube.com/watch?v=xXFTlPZJJoo)
 
 
 ## What is Bring Your Own Key (BYOK)?