[core] Remove dead style contain code (#4402)

docs/data/toolpad/studio/components/button/button.md

@@ -17,7 +17,7 @@ Button component becomes usable through an **onClick** event handler property. I
 You can write any valid JavaScript that you want to execute on the click of button. It can change component state or call backend code.
 Below video shows how on a button click, the user input can be shown on a page in a text field component:
 
-<video controls width="100%" height="auto" style="contain" alt="button-onclick-js-expression">
+<video controls width="100%" height="auto" alt="button-onclick-js-expression">
   <source src="/static/toolpad/docs/studio/components/button/button-usage.mp4" type="video/mp4">
   Your browser does not support the video tag.
 </video>

docs/data/toolpad/studio/components/data-grid/data-grid.md

@@ -16,7 +16,7 @@ A Data Grid is an essential component in an internal application. The following
 
 Rows property requires an array of data to show inside the data grid. It can be configured either by clicking on it and providing JSON or by binding it to a query output. The video below shows how to bind data to data grid using rows linking:
 
-<video controls width="100%" height="auto" style="contain" alt="datagrid-rows">
+<video controls width="100%" height="auto" alt="datagrid-rows">
   <source src="/static/toolpad/docs/studio/components/datagrid/datagrid_rows.mp4" type="video/mp4">
   Your browser does not support the video tag.
 </video>
@@ -26,7 +26,7 @@ Rows property requires an array of data to show inside the data grid. It can be
 Columns property is used to configure the columns to be displayed. Choose a column and you'll get a pop-up window to configure its header name, width, alignment and data type.
 From the `type` drop down you can also [customize a column](/toolpad/studio/how-to-guides/customize-datagrid/).
 
-<video controls width="100%" height="auto" style="contain" alt="datagrid-columns">
+<video controls width="100%" height="auto" alt="datagrid-columns">
   <source src="/static/toolpad/docs/studio/components/datagrid/datagrid_column.mp4" type="video/mp4">
   Your browser does not support the video tag.
 </video>
@@ -39,7 +39,7 @@ Id field property is used to identify which column contains the id column. By de
 
 This property shows the currently selected row or `null` in case no row has been selected. It is available to be bound to take any action on the selected row like [deleting a row](/toolpad/studio/how-to-guides/delete-datagrid-row/) from data grid.
 
-<video controls width="100%" height="auto" style="contain" alt="datagrid-selection">
+<video controls width="100%" height="auto" alt="datagrid-selection">
   <source src="/static/toolpad/docs/studio/components/datagrid/datagrid_selection.mp4" type="video/mp4">
   Your browser does not support the video tag.
 </video>
@@ -48,7 +48,7 @@ This property shows the currently selected row or `null` in case no row has been
 
 Loading property is used to to inform the user when the data is being prepared. It can be [bound to](/toolpad/studio/how-to-guides/delete-datagrid-row/#configure-loading-states-optional) React query properties like isFetching, isLoading.
 
-<video controls width="100%" height="auto" style="contain" alt="datagrid-loading">
+<video controls width="100%" height="auto" alt="datagrid-loading">
   <source src="/static/toolpad/docs/studio/components/datagrid/datagrid_loading.mp4" type="video/mp4">
   Your browser does not support the video tag.
 </video>

docs/data/toolpad/studio/components/date-picker/date-picker.md

@@ -26,7 +26,7 @@ The current selected date. It shows the format in which it is being provided to
 
 Allows setting a default value. Example:
 
-<video controls width="100%" height="auto" style="contain" alt="button-onclick-js-expression">
+<video controls width="100%" height="auto" alt="button-onclick-js-expression">
   <source src="/static/toolpad/docs/studio/components/datepicker/datepicker-defaultValue.mp4" type="video/mp4">
   Your browser does not support the video tag.
 </video>
@@ -71,7 +71,7 @@ Disabled property shows the state of the component so that end user is aware tha
 
 isRequired is useful when the action can't be perfomed without a user provided date.
 
-<video controls width="100%" height="auto" style="contain" alt="button-onclick-js-expression">
+<video controls width="100%" height="auto" alt="button-onclick-js-expression">
   <source src="/static/toolpad/docs/studio/components/datepicker/datepicker-validation.mp4" type="video/mp4">
   Your browser does not support the video tag.
 </video>

docs/data/toolpad/studio/components/list/list.md

@@ -10,7 +10,7 @@ A List is an essential component in an application. It had one key property that
 
 It is the number of occurences that the list is supposed to render.
 
-<video controls width="100%" height="auto" style="contain" alt="button-onclick-js-expression">
+<video controls width="100%" height="auto" alt="button-onclick-js-expression">
   <source src="/static/toolpad/docs/studio/components/list/list.mp4" type="video/mp4">
   Your browser does not support the video tag.
 </video>

docs/data/toolpad/studio/components/text-field/text-field.md

@@ -12,7 +12,7 @@ TextField is a text input component. It takes user input and provides the value
 
 It is one of the most used input component. The video below uses some props to demonstrate its usage.
 
-<video controls width="100%" height="auto" style="contain" alt="textfield">
+<video controls width="100%" height="auto" alt="textfield">
   <source src="/static/toolpad/docs/studio/components/textfield/textfield.mp4" type="video/mp4">
   Your browser does not support the video tag.
 </video>

docs/data/toolpad/studio/concepts/building-ui.md

@@ -6,7 +6,7 @@
 
 To access the list of available Toolpad Studio components, hover your cursor over the vertical bar labeled **Component library** to expand it.
 
-<video controls width="auto" height="100%" style="contain" alt="component-library">
+<video controls width="auto" height="100%" alt="component-library">
   <source src="/static/toolpad/docs/studio/concepts/building-ui/component-library.mp4" type="video/mp4">
   Your browser does not support the video tag.
 </video>

docs/data/toolpad/studio/concepts/custom-components.md

@@ -15,7 +15,7 @@ The steps below explain how to create and use a custom component in Toolpad Stud
 In case it doesn't open, check [troubleshoot missing editor](https://mui.com/toolpad/studio/how-to-guides/editor-path/).
 :::
 
-<video controls width="auto" height="100%" style="contain" alt="custom-component-creation">
+<video controls width="auto" height="100%" alt="custom-component-creation">
   <source src="/static/toolpad/docs/studio/concepts/custom-components/custom-component-creation.mp4" type="video/mp4">
   Your browser does not support the video tag.
 </video>
@@ -89,7 +89,7 @@ export default createComponent(HelloWorld, {
 
 This component, when dragged to the canvas, has a **msg** property that you can't bind to. But you can now bind to this property from other components.
 
-<video controls width="auto" height="100%" style="contain" alt="custom-component-creation">
+<video controls width="auto" height="100%" alt="custom-component-creation">
   <source src="/static/toolpad/docs/studio/concepts/custom-components/controlled-prop.mp4" type="video/mp4">
   Your browser does not support the video tag.
 </video>

docs/data/toolpad/studio/concepts/custom-functions.md

@@ -4,7 +4,7 @@
 
 The most powerful way of bringing data into Toolpad Studio is through your own code. You can define functions inside `toolpad/resources` and use them when creating a query of this type. The following video shows how you can use this feature to read data from PostgreSQL.
 
-<video controls width="auto" height="100%" style="contain" alt="custom-function">
+<video controls width="auto" height="100%" alt="custom-function">
   <source src="/static/toolpad/docs/studio/concepts/connecting-to-data/postgres.mp4" type="video/mp4">
   Your browser does not support the video tag.
 </video>

docs/data/toolpad/studio/concepts/data-binding.md

@@ -26,7 +26,7 @@ You can change the format of a value like:
 
 You can write strings inside backticks (`) to write embedded expressions and multiline text. These can be used to read values from other components.
 
-<video controls width="100%" height="auto" style="contain" alt="button-onclick-js-expression">
+<video controls width="100%" height="auto" alt="button-onclick-js-expression">
   <source src="/static/toolpad/docs/studio/components/button/button-usage.mp4" type="video/mp4">
   Your browser does not support the video tag.
 </video>

docs/data/toolpad/studio/concepts/data-providers.md

@@ -6,7 +6,7 @@ Toolpad Studio functions are great to bring some backend state to the page, but
 
 Follow these steps to create a new data provider:
 
-<video controls width="auto" height="100%" style="contain" alt="component-library">
+<video controls width="auto" height="100%" alt="component-library">
   <source src="/static/toolpad/docs/studio/concepts/data-providers/data-provider-1.mp4" type="video/mp4">
   Your browser does not support the video tag.
 </video>
@@ -25,7 +25,7 @@ export default createDataProvider({
 });
 ```
 
-   <video controls width="auto" height="100%" style="contain" alt="component-library">
+   <video controls width="auto" height="100%" alt="component-library">
   <source src="/static/toolpad/docs/studio/concepts/data-providers/data-provider-2.mp4" type="video/mp4">
   Your browser does not support the video tag.
 </video>
@@ -100,7 +100,7 @@ For example, this could print the following if the corresponding column filters
 
 Now the backend function receives the grid filter from the UI in its parameters.
 
-<video controls width="auto" height="100%" style="contain" alt="component-library">
+<video controls width="auto" height="100%" alt="component-library">
   <source src="/static/toolpad/docs/studio/concepts/data-providers/filtering.mp4" type="video/mp4">
   Your browser does not support the video tag.
 </video>
@@ -129,7 +129,7 @@ Depending on which column has been set to sort by, this results in:
 
 Now the backend function receives the grid sorting model from the UI in its parameters.
 
-<video controls width="auto" height="100%" style="contain" alt="component-library">
+<video controls width="auto" height="100%" alt="component-library">
   <source src="/static/toolpad/docs/studio/concepts/data-providers/sorting.mp4" type="video/mp4">
   Your browser does not support the video tag.
 </video>
@@ -156,7 +156,7 @@ export default createDataProvider({
 
 When this method is available in the data provider, each row gets an edit button. This edit button brings the row in edit mode. To commit the changes press the save button on the row that is in edit mode. To discard the changes use the cancel button.
 
-<video controls width="auto" height="100%" style="contain" alt="component-library">
+<video controls width="auto" height="100%" alt="component-library">
   <source src="/static/toolpad/docs/studio/concepts/data-providers/editing.mp4" type="video/mp4">
   Your browser does not support the video tag.
 </video>
@@ -183,7 +183,7 @@ export default createDataProvider({
 
 After you make this method available in the data provider, an "Add record" button appears in the data grid toolbar. Click this button and a new editable row appears at the top of the grid. Fill in the values and click the "Save" button to finish creating the row. You'll have to return the newly created row from the `createRecord` method so that the grid can update accordingly.
 
-<video controls width="auto" height="100%" style="contain" alt="component-library">
+<video controls width="auto" height="100%" alt="component-library">
   <source src="/static/toolpad/docs/studio/concepts/data-providers/creating.mp4" type="video/mp4">
   Your browser does not support the video tag.
 </video>

docs/data/toolpad/studio/concepts/event-handling.md

@@ -10,7 +10,7 @@ Some event handling scenarios:
 
 ### Change component state
 
-<video controls width="100%" height="auto" style="contain" alt="change-component-state">
+<video controls width="100%" height="auto" alt="change-component-state">
   <source src="/static/toolpad/docs/studio/concepts/event-handling/change-component-state.mp4" type="video/mp4">
   Your browser does not support the video tag.
 </video>
@@ -25,7 +25,7 @@ You can call single or multiple queries sequentially to fetch data on the page o
 
 #### Multiple queries
 
-<video controls width="100%" height="auto" style="contain" alt="call-multiple-queries">
+<video controls width="100%" height="auto" alt="call-multiple-queries">
   <source src="/static/toolpad/docs/studio/concepts/event-handling/multiple-queries.mp4" type="video/mp4">
   Your browser does not support the video tag.
 </video>
@@ -38,7 +38,7 @@ See the [deleting data grid row](/toolpad/studio/how-to-guides/delete-datagrid-r
 
 Custom functions allow you to write custom code in your editor. You can write a `console.log` statement that interacts with the data on the page and prints logs.
 
-<video controls width="100%" height="auto" style="contain" alt="console-log">
+<video controls width="100%" height="auto" alt="console-log">
   <source src="/static/toolpad/docs/studio/concepts/event-handling/console-log.mp4" type="video/mp4">
   Your browser does not support the video tag.
 </video>

docs/data/toolpad/studio/concepts/http-requests.md

@@ -65,7 +65,7 @@ You can define these in the interface available in the HTTP Request query editor
 
 As Toolpad Studio HTTP requests are running server-side, they can make use of the available secrets that are stored in environment variables. The mechanism works similar by defining a parameter and instead of binding it to a UI value, bind it to an environment variable. Whenever the request executes, Toolpad Studio will feed the value of the environment variable to the parameter.
 
-<video controls width="auto" height="100%" style="contain" alt="custom-function">
+<video controls width="auto" height="100%" alt="custom-function">
   <source src="/static/toolpad/docs/studio/concepts/connecting-to-data/secrets.mp4" type="video/mp4">
   Your browser does not support the video tag.
 </video>

docs/data/toolpad/studio/concepts/page-properties.md

@@ -45,7 +45,7 @@ Available values are **xs**, **sm**, **md**, **lg**, **xl**, or **None** to conf
 
 Page parameters allow you to pass external data into the Toolpad Studio page state via the URL query parameters.
 
-<video controls width="auto" height="100%" style="contain" alt="custom-component-creation">
+<video controls width="auto" height="100%" alt="custom-component-creation">
   <source src="/static/toolpad/docs/studio/concepts/page-properties/page-parameter-1.mp4" type="video/mp4">
   Your browser does not support the video tag.
 </video>

docs/data/toolpad/studio/concepts/theming.md

@@ -4,7 +4,7 @@
 
 ## Adding a global theme
 
-<video controls width="auto" height="100%" style="contain" alt="custom-component-creation">
+<video controls width="auto" height="100%" alt="custom-component-creation">
   <source src="/static/toolpad/docs/studio/concepts/theming/theme-1.mp4" type="video/mp4">
   Your browser does not support the video tag.
 </video>

docs/data/toolpad/studio/how-to-guides/connect-to-googlesheets.md

@@ -6,7 +6,7 @@ You can write a custom function to read or write data from a Google sheet. We'll
 
 There are many ways to authenticate Google APIs, as mentioned in `google-auth-library`. This guide uses JWTs (JSON Web Tokens), which are appropriate for a server-based application.
 
-<video controls width="100%" height="auto" style="contain" alt="google-sheet-app">
+<video controls width="100%" height="auto" alt="google-sheet-app">
   <source src="/static/toolpad/docs/studio/examples/google-sheet.mp4" type="video/mp4">
   Your browser does not support the video tag.
 </video>