aws-amplify · hbuchel · Mar 26, 2024 · Mar 26, 2024
@@ -318,7 +318,7 @@ npm start
 
 **Step 8:** Use the form to create a few to-do items.
 
-<video autoPlay={true} muted={true} loop={true} width="100%">
+<video autoPlay={true} muted={true} loop={true} width="100%" playsInline={true}>
   <source src="/images/existing-resources/todo-react-cdk.mp4" />
 </video>
 
@@ -822,7 +822,7 @@ class MyApp extends StatelessWidget {
 flutter run -d chrome 
 ```
 
-<video autoPlay={true} muted={true} loop={true} width="100%">
+<video autoPlay={true} muted={true} loop={true} width="100%" playsInline={true}>
   <source src="/images/existing-resources/todo-example-cdk.mp4" />
 </video>
 

@@ -613,7 +613,7 @@ flutter run
 
 
 
-<video autoPlay={true} muted={true} loop={true} width="50%">
+<video autoPlay={true} muted={true} loop={true} width="50%" playsInline={true}>
   <source src="/images/existing-resources/budget-tracker-mobile-cli.mp4" />
 </video>
 
@@ -998,7 +998,7 @@ amplify publish
 
 **Step 12:** Use the URL to run the app in the browser.
 
-<video autoPlay={true} muted={true} loop={true} width="100%">
+<video autoPlay={true} muted={true} loop={true} width="100%" playsInline={true}>
   <source src="/images/existing-resources/connect-to-aws-web-cli.mp4" />
 </video>
 

@@ -43,7 +43,7 @@ You can choose to show the action buttons on the bottom (default), top, or top a
 2. Go to **Display** > **Position**
 3. Select **Bottom**, **Top**, or **Top & bottom**
 
-<video autoPlay={true} muted={true} loop={true} width="100%">
+<video autoPlay={true} muted={true} loop={true} width="100%" playsInline={true}>
   <source src="/images/console/formbuilder/call-to-action-position.mp4" />
 </video>
 
@@ -55,7 +55,7 @@ You can customize action button labels to better describe your form's use case,
 2. Go to **Display** > **Submit button label**
 3. Enter your custom button label
 
-<video autoPlay={true} muted={true} loop={true} width="100%">
+<video autoPlay={true} muted={true} loop={true} width="100%" playsInline={true}>
   <source src="/images/console/formbuilder/call-to-action-label.mp4" />
 </video>
 
@@ -67,7 +67,7 @@ You can customize the visibility of action buttons to better accommodate your fo
 2. Go to **Display** > **Submit button is visible**
 3. Enter your custom button label
 
-<video autoPlay={true} muted={true} loop={true} width="100%">
+<video autoPlay={true} muted={true} loop={true} width="100%" playsInline={true}>
   <source src="/images/console/formbuilder/call-to-action-visibility.mp4" />
 </video>
 

@@ -58,7 +58,7 @@ Add form inputs to personalize the form to your use case. To add a form element:
 3. Click the blue bar with the (+) sign.
 4. Select the form input you want to add.
 
-<video autoPlay={true} muted={true} loop={true} width="100%">
+<video autoPlay={true} muted={true} loop={true} width="100%" playsInline={true}>
   <source src="/images/console/formbuilder/customize-add.mp4" />
 </video>
 
@@ -74,7 +74,7 @@ Rearrange form inputs vertically or horizontally.
 2. Move form input above, below, left, or right of another form input
 3. Drop when a blue bar appears, indicating the form input's new placement
 
-<video autoPlay={true} muted={true} loop={true} width="100%">
+<video autoPlay={true} muted={true} loop={true} width="100%" playsInline={true}>
   <source src="/images/console/formbuilder/customize-drag-and-drop.mp4" />
 </video>
 
@@ -84,7 +84,7 @@ If you want to quickly test your form customizations, select **View as end user*
 
 **Note:** If your form is connected to a data model, then form data will be saved to the cloud upon clicking **Submit**. If this app is being used in production, the data you are saving may be visible to customers.
 
-<video autoPlay={true} muted={true} loop={true} width="100%">
+<video autoPlay={true} muted={true} loop={true} width="100%" playsInline={true}>
   <source src="/images/console/formbuilder/customize-view-as-end-user.mp4" />
 </video>
 
@@ -98,7 +98,7 @@ Add spacing to your form and between inputs. The spacing editor allows you to se
 
 Spacing values can either be a CSS length value (`px`, `rem`, `em`, `%`) or a reference to your theme object's spacing value (`xss`, `medium`, `large`).
 
-<video autoPlay={true} muted={true} loop={true} width="100%">
+<video autoPlay={true} muted={true} loop={true} width="100%" playsInline={true}>
   <source src="/images/console/formbuilder/customize-spacing.mp4" />
 </video>
 
@@ -110,7 +110,7 @@ Spacing values can either be a CSS length value (`px`, `rem`, `em`, `%`) or a re
 2. Go to **Data > Options**
 3. Enter available options line-by-line or paste in a JSON array, such as `["Not started", "In progress", "Done"]`
 
-<video autoPlay={true} muted={true} loop={true} width="100%">
+<video autoPlay={true} muted={true} loop={true} width="100%" playsInline={true}>
   <source src="/images/console/formbuilder/customize-options.mp4" />
 </video>
 
@@ -126,7 +126,7 @@ Spacing values can either be a CSS length value (`px`, `rem`, `em`, `%`) or a re
 
 Here is what a list input looks like for the end user:
 
-<video autoPlay={true} muted={true} loop={true} width="100%">
+<video autoPlay={true} muted={true} loop={true} width="100%" playsInline={true}>
   <source src="/images/console/formbuilder/customize-list-control.mp4" />
 </video>
 
@@ -140,7 +140,7 @@ Use sectional elements to divide your form up into multiple parts. This is usefu
 4. Scroll to the bottom of the element search list
 5. Select **Heading**, **Divider**, or **Text**
 
-<video autoPlay={true} muted={true} loop={true} width="100%">
+<video autoPlay={true} muted={true} loop={true} width="100%" playsInline={true}>
   <source src="/images/console/formbuilder/customize-sectional.mp4" />
 </video>
 

@@ -77,7 +77,7 @@ When you are satisfied with your form configuration and style, [your forms can b
 
 [**Storage Manager**](https://ui.docs.amplify.aws/react/connected-components/storage/storagemanager) fields allow your forms to accept file uploads, which are stored in an Amazon S3 bucket connected to your Amplify app. After uploading, that file's S3 key is stored in your data model, allowing for systematic retrieval using the [Amplify JS library](/[platform]/build-a-backend/storage/download/).
 
-<video autoPlay={true} muted={true} loop={true} width="100%">
+<video autoPlay={true} muted={true} loop={true} width="100%" playsInline={true}>
   <source src="/images/console/formbuilder/storagemanager.mp4" />
 </video>
 

@@ -48,7 +48,7 @@ In [Amplify Studio](/[platform]/tools/console/adminui/start/#logging-in-and-crea
 
 To test the validation rules, select **View as end user**.
 
-<video autoPlay={true} muted={true} loop={true} width="100%">
+<video autoPlay={true} muted={true} loop={true} width="100%" playsInline={true}>
   <source src="/images/console/formbuilder/validations-visual.mp4" />
 </video>
 

@@ -342,7 +342,7 @@ Once you add the Authenticator component to your app, you can test the sign-up,
 
 Once you deploy your code to Git, you can manage users and groups for the branch environment in the Amplify console.
 
-<video autoPlay={true} muted={true} loop={true} width="100%">
+<video autoPlay={true} muted={true} loop={true} width="100%" playsInline={true}>
   <source src="/images/gen2/authentication/user-manage.mp4" />
 </video>
 

@@ -26,7 +26,7 @@ After you've deployed your [first branch](/gen2/start/quickstart/), you can manu
 You can also define a pattern to connect only certain branches. For example, setting `dev`, `staging`, and `feature/*` will automatically connect all three branch types. Your `dev` and `staging` branches, as well as any branch that begins with `feature/`, will be connected.
 </Callout>
 
-<video autoPlay={true} muted={true} loop={true} width="100%">
+<video autoPlay={true} muted={true} loop={true} width="100%" playsInline={true}>
   <source src="/images/gen2/fullstack-branching/autobranch.mp4" />
 </video>
 

@@ -22,7 +22,7 @@ You can set up your backend deployments using the following steps:
 
 2.  Disable Auto-build for your branch. This will ensure code commits to your branch will not trigger a build.
 
-<video autoPlay={true} muted={true} loop={true} width="70%">
+<video autoPlay={true} muted={true} loop={true} width="70%" playsInline={true}>
   <source src="/images/gen2/fullstack-branching/auto-build.mp4" />
 </video>
 

@@ -26,7 +26,7 @@ You can set secrets for your fullstack branch deployments or your local dev serv
 
 You can add secrets for branch deployments in the Amplify console. From the App home page, navigate to **Hosting > Secrets**, and then choose the **Manage secrets** button. You can add a secret key or value that applies to all deployed branches or just specific branches.
 
-<video autoPlay={true} muted={true} loop={true} width="100%">
+<video autoPlay={true} muted={true} loop={true} width="100%" playsInline={true}>
   <source src="/images/gen2/secrets-and-vars/secrets.mp4" />
 </video>
 

@@ -41,7 +41,7 @@ With Gen 2, all shared environments (such as `production`, `staging`, `gamma`) m
 
 All branches can be managed in the new Amplify console. The Gen 2 Amplify console consolidates the console experiences across Studio and Hosting, providing a single place for you to manage your builds, hosting settings (such as custom domains), deployed resources (such as data browser or user management), and environment variables and secrets. Even though you can access deployed resources directly in other AWS service consoles, the Amplify console will offer a first-party experience for the categories almost every app needs—data, auth, storage, and functions. For example, with Data, Amplify offers an API playground and a data manager (coming soon) with relationship building, seed data generation, and file upload capabilities.
 
-<video autoPlay={true} muted={true} loop={true} width="100%">
+<video autoPlay={true} muted={true} loop={true} width="100%" playsInline={true}>
   <source src="/images/gen2/how-amplify-works/console.mp4" />
 </video>
 

@@ -181,6 +181,7 @@ const Gen2Overview = () => {
           autoPlay
           muted
           loop
+          playsInline={true}
         />
 
         <Columns columns={2} as="ul">

@@ -15,7 +15,7 @@ export function getStaticProps(context) {
 
 Branch deployments require the [`AmplifyBackendDeployFullAccess`](https://docs.aws.amazon.com/amplify/latest/userguide/security-iam-awsmanpol.html#security-iam-awsmanpol-AmplifyBackendDeployFullAccess) managed policy to be able to deploy backend resources during a fullstack deployment. When connecting your project through the console, a role with this policy attached will be automatically created for you.
 
-<video autoPlay={true} muted={true} loop={true} width="100%">
+<video autoPlay={true} muted={true} loop={true} width="100%" playsInline={true}>
   <source src="/images/gen2/references/iam-policy.mp4" />
 </video>
 

@@ -206,7 +206,7 @@ class MainActivity : ComponentActivity() {
 
 Now if you run the application on the Android emulator, you should see the authentication flow working.
 
-<video autoPlay={true} muted={true} loop={true} width="40%">
+<video autoPlay={true} muted={true} loop={true} width="40%" playsInline={true}>
   <source src="/images/gen2/getting-started/android/android-getting-started-1.mp4" />
 </video>
 
@@ -468,7 +468,7 @@ Row(
 
 With the click, we update the checkbox but with the long click we remove it. Now if you run the application you should see the following flow.
 
-<video autoPlay={true} muted={true} loop={true} width="40%">
+<video autoPlay={true} muted={true} loop={true} width="40%" playsInline={true}>
   <source src="/images/gen2/getting-started/android/android-getting-started-2.mp4" />
 </video>
 
@@ -620,7 +620,7 @@ class MyApp extends StatelessWidget {
 
 The **Authenticator** widget provides an authentication flow according to the resources that has been configured. If you run the application now (on Flutter you can run your applications on Web, Desktop and Mobile), you can see the authentication flow working.
 
-<video autoPlay={true} muted={true} loop={true} width="100%">
+<video autoPlay={true} muted={true} loop={true} width="100%" playsInline={true}>
   <source src="/images/gen2/getting-started/flutter/flutter-getting-started-1.mp4" />
 </video>
 
@@ -835,7 +835,7 @@ return false;
 
 This will delete the Todo item when the user swipes the item from right to left. Now if you run the application you should see the following flow.
 
-<video autoPlay={true} muted={true} loop={true} width="100%">
+<video autoPlay={true} muted={true} loop={true} width="100%" playsInline={true}>
   <source src="/images/gen2/getting-started/flutter/flutter-getting-started-2.mp4" />
 </video>
 
@@ -912,7 +912,7 @@ npx amplify sandbox --config-format=json-mobile
 
 Once the sandbox environment is running, you would also generate the configuration files for your application. However, Xcode won't be able to recognize them. For recognizing the files, you need to drag and drop the generated files to your project.
 
-<video autoPlay={true} muted={true} loop={true} width="100%">
+<video autoPlay={true} muted={true} loop={true} width="100%" playsInline={true}>
   <source src="/images/gen2/getting-started/ios/ios-getting-started-2.mp4" />
 </video>
 
@@ -1000,7 +1000,7 @@ This will add the authentication flow by using the Authenticator component and a
 
 If you run the application now, you can see that the authentication flow is working.
 
-<video autoPlay={true} muted={true} loop={true} width="40%">
+<video autoPlay={true} muted={true} loop={true} width="40%" playsInline={true}>
   <source src="/images/gen2/getting-started/ios/ios-getting-started-1.mp4" />
 </video>
 
@@ -1227,7 +1227,7 @@ List(todos, id: \.id) { todo in
 
 This will update the UI to show a toggle to update the todo and a long press gesture to delete the todo. Now if you run the application you should see the following flow.
 
-<video autoPlay={true} muted={true} loop={true} width="40%">
+<video autoPlay={true} muted={true} loop={true} width="40%" playsInline={true}>
   <source src="/images/gen2/getting-started/ios/ios-getting-started-3.mp4" />
 </video>