add video tutorial to ReferenceInput

ReferenceInput.md

@@ -7,12 +7,7 @@ title: "The ReferenceInput Component"
 
 Use `<ReferenceInput>` for foreign-key values, for instance, to edit the `company_id` of a `contact` resource. 
 
-<video controls autoplay playsinline muted loop>
-  <source src="./img/reference-input.webm" type="video/webm"/>
-  <source src="./img/reference-input.mp4" type="video/mp4"/>
-  Your browser does not support the video tag.
-</video>
-
+<iframe src="https://www.youtube-nocookie.com/embed/LcycR3gB0qs" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen style="aspect-ratio: 16 / 9;width:100%;margin-bottom:1em;"></iframe>
 
 ## Usage
 
@@ -39,12 +34,19 @@ const ContactEdit = () => (
         <SimpleForm>
             <TextInput source="first_name" />
             <TextInput source="last_name" />
+            <TextInput source="title" />
             <ReferenceInput source="company_id" reference="companies" />
         </SimpleForm>
     </Edit>
 );
 ```
 
+<video controls autoplay playsinline muted loop>
+  <source src="./img/reference-input.webm" type="video/webm"/>
+  <source src="./img/reference-input.mp4" type="video/mp4"/>
+  Your browser does not support the video tag.
+</video>
+
 `<ReferenceInput>` requires a `source` and a `reference` prop.
 
 `<ReferenceInput>` uses the foreign key value to fetch the related record. It also grabs the list of possible choices for the field. For instance, if the `ContactEdit` component above is used to edit the following contact:
@@ -437,3 +439,4 @@ Why does `<ReferenceInput>` use the `dataProvider.getMany()` method with a singl
 Because when there may be many `<ReferenceInput>` for the same resource in a form (for instance when inside an `<ArrayInput>`), react-admin *aggregates* the calls to `dataProvider.getMany()` into a single one with `[id1, id2, ...]`.
 
 This speeds up the UI and avoids hitting the API too much.
+