more assets

content/blog/custom-field-components.mdx

@@ -26,7 +26,7 @@ Throughout the post, I'll refer to a few core TinaCMS concepts such as [forms](h
 
 Tina was intended to be fully customizable and extensible. Creating **custom fields can provide precise control** over the sidebar configuration and styling, along with implementing unique field functionality.
 
-![saturation-custom-field-gif](https://res.cloudinary.com/forestry-demo/image/upload/v1645712782/tina-io/docs/saturate-custom-field.gif)
+<Youtube embedSrc="/img/blog/custom-field-components/saturate-custom-field.webm"/>
 
 > Want to jump ahead? Feel free to check out a [**finished version**](https://github.com/kendallstrautman/llama-filters) of the custom range input field seen in the gif above, or take a peak at a more complex [_Authors_ field plugin](https://github.com/tinacms/tina-starter-grande/blob/master/src/fields/authors.js) in the Tina Grande repo.
 

content/docs/editing/blocks.mdx

@@ -8,7 +8,7 @@ previous: content/docs/editing/markdown.mdx
 
 Tina supports block-based editing, so that your editors can build out full pages using your pre-defined blocks.
 
-![block-based-editing](https://res.cloudinary.com/forestry-demo/image/upload/v1645712511/tina-io/docs/your-blocks.gif)
+<Youtube embedSrc="/img/docs/your-blocks.webm"/>
 
 Let's say you want your editors to build out a page, and you have 3 main "block" types to start:
 

content/docs/editing/overview.mdx

@@ -23,6 +23,6 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultricies urna ut
 
 But, sometimes you may want to give your editors more of a template to work with. Tina also supports blocks-based editing, so that you can enable your editors to build out full pages using your pre-defined blocks
 
-![blocks-based-editing](https://res.cloudinary.com/forestry-demo/image/upload/v1645712511/tina-io/docs/your-blocks.gif)
+<Youtube embedSrc="/img/docs/your-blocks.webm"/>
 
 Continue reading to learn more about different ways to edit content with Tina.

content/docs/product-tour.mdx

@@ -14,7 +14,7 @@ Here we give a quick **2 minute overview of TinaCMS**, and how it fits into your
 
 TinaCMS is an open-source Content Management System (CMS) that seamlessly integrates with your Markdown workflow.
 
-![Intro-gif](https://res.cloudinary.com/forestry-demo/image/upload/v1645712511/tina-io/docs/your-blocks.gif)
+<Youtube embedSrc="/img/docs/your-blocks.webm"/>
 
 ### Your Website
 
@@ -56,7 +56,7 @@ TinaCMS is an open-source Content Management System (CMS) that seamlessly integr
 
 - TinaCMS provides an intuitive CMS interface for your editors. For sites using React, TinaCMS supports "Visual Editing" to allow content editors to see real-time changes.
 
-![your-blocks-gif](https://res.cloudinary.com/forestry-demo/image/upload/v1645712511/tina-io/docs/your-blocks.gif)
+<Youtube embedSrc="/img/docs/your-blocks.webm"/>
 
 ### /admin route
 

pages/docs/product-tour.tsx

@@ -158,9 +158,10 @@ export default function Page(props) {
               </div>
               <div id="sticky-img-container">
                 <div className="img-container">
+                  {/* Im keeping this as a .gif rather than transferring to .webm as a .gif would require me to change from <img> to <video> which would break the rest of the active images */}
                   <img
                     ref={activeImg}
-                    src="https://res.cloudinary.com/forestry-demo/image/upload/v1645712511/tina-io/docs/your-blocks.gif"
+                    src="/img/docs/your-blocks.gif"
                   />
                   <img ref={transitionImg} />
                 </div>