add sandbox attribute to iframes (aws-amplify#5367)

Author: katieklein

src/components/contribute/QuickstartResources.tsx

@@ -19,6 +19,7 @@ export default function QuickstartResources() {
       <Flex wrap={'wrap'} justifyContent={'center'} width="100%" gap="2em">
         <View width={{ base: '90%', large: '40%' }}>
           <iframe
+            sandbox
             width="600"
             height="350"
             src="https://www.youtube-nocookie.com/embed/8BUSqSkhqtw"
@@ -30,6 +31,7 @@ export default function QuickstartResources() {
         </View>
         <View width={{ base: '90%', large: '40%' }}>
           <iframe
+            sandbox
             width="600"
             height="350"
             src="https://www.youtube-nocookie.com/embed/WMKVE98hEzE"

src/fragments/cli-config.mdx

@@ -77,6 +77,7 @@ Successfully set up the new user.
 Watch the video below to learn how to install and configure the Amplify CLI or skip to the next section to follow the step-by-step instructions.
 
 <iframe
+  sandbox
   src="https://www.youtube-nocookie.com/embed/fWbM5DLh25U"
   frameborder="0"
   allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"

src/fragments/guides/hosting/custom-domains.mdx

@@ -1,3 +1,3 @@
 In this video you will learn how to configure a custom domain using the Amplify Console.
 
-<iframe src="https://www.youtube-nocookie.com/embed/uaG2mMYLI68" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+<iframe sandbox src="https://www.youtube-nocookie.com/embed/uaG2mMYLI68" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

src/fragments/guides/hosting/nextjs.mdx

@@ -1,6 +1,6 @@
 In this guide you'll learn how to deploy a [Next.js](https://nextjs.org/) app using Amplify Hosting. Amplify supports the hosting of static apps and apps with dynamic server-side rendered routes (SSR). 
 
-<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/eqoZrXulE8A" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+<iframe sandbox width="560" height="315" src="https://www.youtube-nocookie.com/embed/eqoZrXulE8A" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 
 ## Prerequisites
 

src/fragments/guides/hosting/password-protected-deployments.mdx

@@ -1,3 +1,3 @@
 In this video you will learn how to configure password-protection for your Amplify web deployments using the Amplify Console.
 
-<iframe src="https://www.youtube-nocookie.com/embed/QIxm9HPefT0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+<iframe sandbox src="https://www.youtube-nocookie.com/embed/QIxm9HPefT0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

src/fragments/guides/hosting/pull-request-previews.mdx

@@ -1,3 +1,3 @@
 In this video you will learn how to enable Pull Request Previews using the Amplify Console.
 
-<iframe src="https://www.youtube-nocookie.com/embed/NMln6UpcodE" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+<iframe sandbox src="https://www.youtube-nocookie.com/embed/NMln6UpcodE" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

src/fragments/lib-v1/datastore/native_common/how-it-works.mdx

@@ -3,7 +3,7 @@ Amplify DataStore provides a persistent on-device storage repository for you to
 
 ## How it Works
 
-<iframe src="https://www.youtube-nocookie.com/embed/KcYl6_We0EU" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+<iframe sandbox src="https://www.youtube-nocookie.com/embed/KcYl6_We0EU" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 
 Amplify DataStore is an on device persistent repository for interacting with your local data while it synchronizes with the cloud. The core idea is to focus on your data modeling in your application with GraphQL, adding any authorization rules or business logic into your application when needed. This can be done using Amplify CLI project functionality (`amplify add auth` or `amplify add function`) as well as the [GraphQL Transformer](/cli/graphql/overview).
 

src/fragments/lib/datastore/js/getting-started/30_platformIntegration.mdx

@@ -1,6 +1,7 @@
 The fastest way to get started is using the `amplify-app` npx script.
 
 <iframe
+  sandbox
   src="https://www.youtube-nocookie.com/embed/wH-UnQy1ltM"
   frameborder="0"
   allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"

src/fragments/lib/datastore/native_common/how-it-works.mdx

@@ -3,7 +3,7 @@ Amplify DataStore provides a persistent on-device storage repository for you to
 
 ## How it Works
 
-<iframe src="https://www.youtube-nocookie.com/embed/KcYl6_We0EU" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+<iframe sandbox src="https://www.youtube-nocookie.com/embed/KcYl6_We0EU" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 
 Amplify DataStore is an on device persistent repository for interacting with your local data while it synchronizes with the cloud. The core idea is to focus on your data modeling in your application with GraphQL, adding any authorization rules or business logic into your application when needed. This can be done using Amplify CLI project functionality (`amplify add auth` or `amplify add function`) as well as the [GraphQL Transformer](/cli/graphql/overview).
 

src/fragments/lib/datastore/react-native/getting-started/30_platformIntegration.mdx

@@ -1,6 +1,6 @@
 The fastest way to get started is using the `amplify-app` npx script.
 
-<iframe src="https://www.youtube-nocookie.com/embed/wH-UnQy1ltM" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+<iframe sandbox src="https://www.youtube-nocookie.com/embed/wH-UnQy1ltM" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 <br/>
 
 <BlockSwitcher>