From abc71242376a11a15b757ddae6f2217d74bcbded Mon Sep 17 00:00:00 2001
From: Esha Noronha <enm@umbraco.dk>
Date: Mon, 19 May 2025 22:07:44 +0200
Subject: [PATCH 1/5] Added some details about Videos

---
 .../fundamentals/design/rendering-media.md    | 34 +++++++++++++++++++
 1 file changed, 34 insertions(+)

diff --git a/15/umbraco-cms/fundamentals/design/rendering-media.md b/15/umbraco-cms/fundamentals/design/rendering-media.md
index e5adb5bcc58..08323f8b214 100644
--- a/15/umbraco-cms/fundamentals/design/rendering-media.md
+++ b/15/umbraco-cms/fundamentals/design/rendering-media.md
@@ -76,6 +76,40 @@ As with example one, we are accessing a MediaType `image` using the same Guid as
 It is always worth having null-checks around your code when retrieving media in case the conversion fails or Media() returns null. This makes your code more robust.
 {% endhint %}
 
+## Working with Video files
+
+If you upload a video file (such as .mp4) to the Media library, Umbraco will store it as a Video Media Type by default. Unlike images, video files won’t include properties like `umbracoWidth` or `umbracoHeight`, but you can still retrieve the media item and render it using the `<video>` HTML tag.
+
+### Example: Rendering a Video Media item
+
+```csharp
+@{
+    var videoUrl = string.Empty;
+    var videoMediaItem = Umbraco.Media(Guid.Parse("8c49c5d3-cb2a-48b2-87c9-7e2c1873e948"));
+
+    if (videoMediaItem != null)
+    {
+        videoUrl = videoMediaItem?.Url();
+    }
+}
+      
+@if (!string.IsNullOrEmpty(videoUrl))
+{
+    <video width="640" height="360" controls>
+        <source src="@videoUrl" type="video/mp4">
+            Your browser does not support the video tag.
+    </video>
+}
+```
+
+This example assumes that:
+
+* You've uploaded an MP4 file to the **Media** section.
+* You want to include basic playback controls in the browser.
+* You know the media item’s ID.
+
+You can also add custom properties to your Video Media Type (for example: `thumbnail`, `autoplay`, `caption`) under **Settings** > **Media Types**.
+
 ### Other Media Items such as `File`
 
 Accessing other media items can be performed in the same way. The techniques are not limited to the `Image` type, but it is one of the most common use cases.

From 9db5b0c69df9ce118e90faed9ecb0506808e147e Mon Sep 17 00:00:00 2001
From: Esha Noronha <enm@umbraco.dk>
Date: Mon, 19 May 2025 22:26:36 +0200
Subject: [PATCH 2/5] Added section to v10, v13, v14

---
 .../fundamentals/design/rendering-media.md    | 34 +++++++++++++++++++
 .../fundamentals/design/rendering-media.md    | 34 +++++++++++++++++++
 .../fundamentals/design/rendering-media.md    | 34 +++++++++++++++++++
 3 files changed, 102 insertions(+)

diff --git a/10/umbraco-cms/fundamentals/design/rendering-media.md b/10/umbraco-cms/fundamentals/design/rendering-media.md
index 16e64cab013..78cc29c6b94 100644
--- a/10/umbraco-cms/fundamentals/design/rendering-media.md
+++ b/10/umbraco-cms/fundamentals/design/rendering-media.md
@@ -78,6 +78,40 @@ As with example one, we are accessing a MediaType `image` using the same Guid as
 It is always worth having null-checks around your code when retrieving media in case the conversion fails or Media() returns null. This makes your code more robust.
 {% endhint %}
 
+## Working with Video files
+
+If you upload a video file (such as .mp4) to the Media library, Umbraco will store it as a Video Media Type by default. Unlike images, video files won’t include properties like `umbracoWidth` or `umbracoHeight`, but you can still retrieve the media item and render it using the `<video>` HTML tag.
+
+### Example: Rendering a Video Media item
+
+```csharp
+@{
+    var videoUrl = string.Empty;
+    var videoMediaItem = Umbraco.Media(Guid.Parse("8c49c5d3-cb2a-48b2-87c9-7e2c1873e948"));
+
+    if (videoMediaItem != null)
+    {
+        videoUrl = videoMediaItem?.Url();
+    }
+}
+      
+@if (!string.IsNullOrEmpty(videoUrl))
+{
+    <video width="640" height="360" controls>
+        <source src="@videoUrl" type="video/mp4">
+            Your browser does not support the video tag.
+    </video>
+}
+```
+
+This example assumes that:
+
+* You've uploaded an MP4 file to the **Media** section.
+* You want to include basic playback controls in the browser.
+* You know the media item’s ID.
+
+You can also add custom properties to your Video Media Type (for example: `thumbnail`, `autoplay`, `caption`) under **Settings** > **Media Types**.
+
 ### Other Media Items such as `File`
 
 Accessing other media items can be performed in the same way. The techniques are not limited to the `Image` type, but it is one of the most common use cases.
diff --git a/13/umbraco-cms/fundamentals/design/rendering-media.md b/13/umbraco-cms/fundamentals/design/rendering-media.md
index e5adb5bcc58..08323f8b214 100644
--- a/13/umbraco-cms/fundamentals/design/rendering-media.md
+++ b/13/umbraco-cms/fundamentals/design/rendering-media.md
@@ -76,6 +76,40 @@ As with example one, we are accessing a MediaType `image` using the same Guid as
 It is always worth having null-checks around your code when retrieving media in case the conversion fails or Media() returns null. This makes your code more robust.
 {% endhint %}
 
+## Working with Video files
+
+If you upload a video file (such as .mp4) to the Media library, Umbraco will store it as a Video Media Type by default. Unlike images, video files won’t include properties like `umbracoWidth` or `umbracoHeight`, but you can still retrieve the media item and render it using the `<video>` HTML tag.
+
+### Example: Rendering a Video Media item
+
+```csharp
+@{
+    var videoUrl = string.Empty;
+    var videoMediaItem = Umbraco.Media(Guid.Parse("8c49c5d3-cb2a-48b2-87c9-7e2c1873e948"));
+
+    if (videoMediaItem != null)
+    {
+        videoUrl = videoMediaItem?.Url();
+    }
+}
+      
+@if (!string.IsNullOrEmpty(videoUrl))
+{
+    <video width="640" height="360" controls>
+        <source src="@videoUrl" type="video/mp4">
+            Your browser does not support the video tag.
+    </video>
+}
+```
+
+This example assumes that:
+
+* You've uploaded an MP4 file to the **Media** section.
+* You want to include basic playback controls in the browser.
+* You know the media item’s ID.
+
+You can also add custom properties to your Video Media Type (for example: `thumbnail`, `autoplay`, `caption`) under **Settings** > **Media Types**.
+
 ### Other Media Items such as `File`
 
 Accessing other media items can be performed in the same way. The techniques are not limited to the `Image` type, but it is one of the most common use cases.
diff --git a/14/umbraco-cms/fundamentals/design/rendering-media.md b/14/umbraco-cms/fundamentals/design/rendering-media.md
index e5adb5bcc58..08323f8b214 100644
--- a/14/umbraco-cms/fundamentals/design/rendering-media.md
+++ b/14/umbraco-cms/fundamentals/design/rendering-media.md
@@ -76,6 +76,40 @@ As with example one, we are accessing a MediaType `image` using the same Guid as
 It is always worth having null-checks around your code when retrieving media in case the conversion fails or Media() returns null. This makes your code more robust.
 {% endhint %}
 
+## Working with Video files
+
+If you upload a video file (such as .mp4) to the Media library, Umbraco will store it as a Video Media Type by default. Unlike images, video files won’t include properties like `umbracoWidth` or `umbracoHeight`, but you can still retrieve the media item and render it using the `<video>` HTML tag.
+
+### Example: Rendering a Video Media item
+
+```csharp
+@{
+    var videoUrl = string.Empty;
+    var videoMediaItem = Umbraco.Media(Guid.Parse("8c49c5d3-cb2a-48b2-87c9-7e2c1873e948"));
+
+    if (videoMediaItem != null)
+    {
+        videoUrl = videoMediaItem?.Url();
+    }
+}
+      
+@if (!string.IsNullOrEmpty(videoUrl))
+{
+    <video width="640" height="360" controls>
+        <source src="@videoUrl" type="video/mp4">
+            Your browser does not support the video tag.
+    </video>
+}
+```
+
+This example assumes that:
+
+* You've uploaded an MP4 file to the **Media** section.
+* You want to include basic playback controls in the browser.
+* You know the media item’s ID.
+
+You can also add custom properties to your Video Media Type (for example: `thumbnail`, `autoplay`, `caption`) under **Settings** > **Media Types**.
+
 ### Other Media Items such as `File`
 
 Accessing other media items can be performed in the same way. The techniques are not limited to the `Image` type, but it is one of the most common use cases.

From 0d71b24a3090e214741042ddd9475526432c10a0 Mon Sep 17 00:00:00 2001
From: Esha Noronha <82437098+eshanrnh@users.noreply.github.com>
Date: Thu, 22 May 2025 10:20:22 +0200
Subject: [PATCH 3/5] Update
 10/umbraco-cms/fundamentals/design/rendering-media.md

Co-authored-by: sofietoft <stk@umbraco.com>
---
 10/umbraco-cms/fundamentals/design/rendering-media.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/10/umbraco-cms/fundamentals/design/rendering-media.md b/10/umbraco-cms/fundamentals/design/rendering-media.md
index 78cc29c6b94..fd850b699ce 100644
--- a/10/umbraco-cms/fundamentals/design/rendering-media.md
+++ b/10/umbraco-cms/fundamentals/design/rendering-media.md
@@ -80,7 +80,7 @@ It is always worth having null-checks around your code when retrieving media in
 
 ## Working with Video files
 
-If you upload a video file (such as .mp4) to the Media library, Umbraco will store it as a Video Media Type by default. Unlike images, video files won’t include properties like `umbracoWidth` or `umbracoHeight`, but you can still retrieve the media item and render it using the `<video>` HTML tag.
+If you upload a video file (such as `.mp4`) to the Media library, Umbraco will store it as a Video Media Type by default. Unlike images, video files won’t include properties like `umbracoWidth` or `umbracoHeight`, but you can still retrieve the media item and render it using the `<video>` HTML tag.
 
 ### Example: Rendering a Video Media item
 

From 1f239c2c4ac75f9aacfc7f25054e92baf248b052 Mon Sep 17 00:00:00 2001
From: Esha Noronha <82437098+eshanrnh@users.noreply.github.com>
Date: Thu, 22 May 2025 10:20:28 +0200
Subject: [PATCH 4/5] Update
 10/umbraco-cms/fundamentals/design/rendering-media.md

Co-authored-by: sofietoft <stk@umbraco.com>
---
 10/umbraco-cms/fundamentals/design/rendering-media.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/10/umbraco-cms/fundamentals/design/rendering-media.md b/10/umbraco-cms/fundamentals/design/rendering-media.md
index fd850b699ce..c70545fc545 100644
--- a/10/umbraco-cms/fundamentals/design/rendering-media.md
+++ b/10/umbraco-cms/fundamentals/design/rendering-media.md
@@ -104,7 +104,7 @@ If you upload a video file (such as `.mp4`) to the Media library, Umbraco will s
 }
 ```
 
-This example assumes that:
+The example above assumes that:
 
 * You've uploaded an MP4 file to the **Media** section.
 * You want to include basic playback controls in the browser.

From 2627a0b88dd7aa84d8b47326351ddb73d5ec518e Mon Sep 17 00:00:00 2001
From: Esha Noronha <enm@umbraco.dk>
Date: Thu, 22 May 2025 10:24:38 +0200
Subject: [PATCH 5/5] Incorporated review suggestion to all versions including
 v16

---
 .../fundamentals/design/rendering-media.md    |  2 +-
 .../fundamentals/design/rendering-media.md    |  6 ++--
 .../fundamentals/design/rendering-media.md    |  6 ++--
 .../fundamentals/design/rendering-media.md    |  6 ++--
 .../fundamentals/design/rendering-media.md    | 34 +++++++++++++++++++
 5 files changed, 44 insertions(+), 10 deletions(-)

diff --git a/10/umbraco-cms/fundamentals/design/rendering-media.md b/10/umbraco-cms/fundamentals/design/rendering-media.md
index c70545fc545..b624868540a 100644
--- a/10/umbraco-cms/fundamentals/design/rendering-media.md
+++ b/10/umbraco-cms/fundamentals/design/rendering-media.md
@@ -106,7 +106,7 @@ If you upload a video file (such as `.mp4`) to the Media library, Umbraco will s
 
 The example above assumes that:
 
-* You've uploaded an MP4 file to the **Media** section.
+* You've uploaded an `.mp4` file to the **Media** section.
 * You want to include basic playback controls in the browser.
 * You know the media item’s ID.
 
diff --git a/13/umbraco-cms/fundamentals/design/rendering-media.md b/13/umbraco-cms/fundamentals/design/rendering-media.md
index 08323f8b214..e339f90bf25 100644
--- a/13/umbraco-cms/fundamentals/design/rendering-media.md
+++ b/13/umbraco-cms/fundamentals/design/rendering-media.md
@@ -78,7 +78,7 @@ It is always worth having null-checks around your code when retrieving media in
 
 ## Working with Video files
 
-If you upload a video file (such as .mp4) to the Media library, Umbraco will store it as a Video Media Type by default. Unlike images, video files won’t include properties like `umbracoWidth` or `umbracoHeight`, but you can still retrieve the media item and render it using the `<video>` HTML tag.
+If you upload a video file (such as `.mp4`) to the Media library, Umbraco will store it as a Video Media Type by default. Unlike images, video files won’t include properties like `umbracoWidth` or `umbracoHeight`, but you can still retrieve the media item and render it using the `<video>` HTML tag.
 
 ### Example: Rendering a Video Media item
 
@@ -102,9 +102,9 @@ If you upload a video file (such as .mp4) to the Media library, Umbraco will sto
 }
 ```
 
-This example assumes that:
+The example above assumes that:
 
-* You've uploaded an MP4 file to the **Media** section.
+* You've uploaded an `.mp4` file to the **Media** section.
 * You want to include basic playback controls in the browser.
 * You know the media item’s ID.
 
diff --git a/14/umbraco-cms/fundamentals/design/rendering-media.md b/14/umbraco-cms/fundamentals/design/rendering-media.md
index 08323f8b214..e339f90bf25 100644
--- a/14/umbraco-cms/fundamentals/design/rendering-media.md
+++ b/14/umbraco-cms/fundamentals/design/rendering-media.md
@@ -78,7 +78,7 @@ It is always worth having null-checks around your code when retrieving media in
 
 ## Working with Video files
 
-If you upload a video file (such as .mp4) to the Media library, Umbraco will store it as a Video Media Type by default. Unlike images, video files won’t include properties like `umbracoWidth` or `umbracoHeight`, but you can still retrieve the media item and render it using the `<video>` HTML tag.
+If you upload a video file (such as `.mp4`) to the Media library, Umbraco will store it as a Video Media Type by default. Unlike images, video files won’t include properties like `umbracoWidth` or `umbracoHeight`, but you can still retrieve the media item and render it using the `<video>` HTML tag.
 
 ### Example: Rendering a Video Media item
 
@@ -102,9 +102,9 @@ If you upload a video file (such as .mp4) to the Media library, Umbraco will sto
 }
 ```
 
-This example assumes that:
+The example above assumes that:
 
-* You've uploaded an MP4 file to the **Media** section.
+* You've uploaded an `.mp4` file to the **Media** section.
 * You want to include basic playback controls in the browser.
 * You know the media item’s ID.
 
diff --git a/15/umbraco-cms/fundamentals/design/rendering-media.md b/15/umbraco-cms/fundamentals/design/rendering-media.md
index 08323f8b214..e339f90bf25 100644
--- a/15/umbraco-cms/fundamentals/design/rendering-media.md
+++ b/15/umbraco-cms/fundamentals/design/rendering-media.md
@@ -78,7 +78,7 @@ It is always worth having null-checks around your code when retrieving media in
 
 ## Working with Video files
 
-If you upload a video file (such as .mp4) to the Media library, Umbraco will store it as a Video Media Type by default. Unlike images, video files won’t include properties like `umbracoWidth` or `umbracoHeight`, but you can still retrieve the media item and render it using the `<video>` HTML tag.
+If you upload a video file (such as `.mp4`) to the Media library, Umbraco will store it as a Video Media Type by default. Unlike images, video files won’t include properties like `umbracoWidth` or `umbracoHeight`, but you can still retrieve the media item and render it using the `<video>` HTML tag.
 
 ### Example: Rendering a Video Media item
 
@@ -102,9 +102,9 @@ If you upload a video file (such as .mp4) to the Media library, Umbraco will sto
 }
 ```
 
-This example assumes that:
+The example above assumes that:
 
-* You've uploaded an MP4 file to the **Media** section.
+* You've uploaded an `.mp4` file to the **Media** section.
 * You want to include basic playback controls in the browser.
 * You know the media item’s ID.
 
diff --git a/16/umbraco-cms/fundamentals/design/rendering-media.md b/16/umbraco-cms/fundamentals/design/rendering-media.md
index e5adb5bcc58..e339f90bf25 100644
--- a/16/umbraco-cms/fundamentals/design/rendering-media.md
+++ b/16/umbraco-cms/fundamentals/design/rendering-media.md
@@ -76,6 +76,40 @@ As with example one, we are accessing a MediaType `image` using the same Guid as
 It is always worth having null-checks around your code when retrieving media in case the conversion fails or Media() returns null. This makes your code more robust.
 {% endhint %}
 
+## Working with Video files
+
+If you upload a video file (such as `.mp4`) to the Media library, Umbraco will store it as a Video Media Type by default. Unlike images, video files won’t include properties like `umbracoWidth` or `umbracoHeight`, but you can still retrieve the media item and render it using the `<video>` HTML tag.
+
+### Example: Rendering a Video Media item
+
+```csharp
+@{
+    var videoUrl = string.Empty;
+    var videoMediaItem = Umbraco.Media(Guid.Parse("8c49c5d3-cb2a-48b2-87c9-7e2c1873e948"));
+
+    if (videoMediaItem != null)
+    {
+        videoUrl = videoMediaItem?.Url();
+    }
+}
+      
+@if (!string.IsNullOrEmpty(videoUrl))
+{
+    <video width="640" height="360" controls>
+        <source src="@videoUrl" type="video/mp4">
+            Your browser does not support the video tag.
+    </video>
+}
+```
+
+The example above assumes that:
+
+* You've uploaded an `.mp4` file to the **Media** section.
+* You want to include basic playback controls in the browser.
+* You know the media item’s ID.
+
+You can also add custom properties to your Video Media Type (for example: `thumbnail`, `autoplay`, `caption`) under **Settings** > **Media Types**.
+
 ### Other Media Items such as `File`
 
 Accessing other media items can be performed in the same way. The techniques are not limited to the `Image` type, but it is one of the most common use cases.