dev: remove fileSize limit and fit the video in the block editor #23863

core-web/libs/block-editor/src/lib/components/dot-block-editor/dot-block-editor.component.scss

@@ -256,6 +256,17 @@
             }
         }
 
+        video {
+            max-width: 100%;
+            max-height: 100%;
+            height: auto;
+        }
+
+        .vertical-video {
+            max-height: 400px;
+            width: auto;
+        }
+
         .node-container {
             margin-bottom: $spacing-3;
         }

core-web/libs/block-editor/src/lib/nodes/video/video.node.ts

@@ -35,6 +35,13 @@ export const VideoNode = Node.create({
                 parseHTML: (element) => element.getAttribute('height'),
                 renderHTML: (attributes) => ({ height: attributes.height })
             },
+            orientation: {
+                default: null,
+                parseHTML: (element) => element.getAttribute('orientation'),
+                renderHTML: ({ height, width }) => ({
+                    orientation: height > width ? 'vertical' : 'horizontal'
+                })
+            },
             data: {
                 default: null,
                 parseHTML: (element) => element.getAttribute('data'),
@@ -84,10 +91,18 @@ export const VideoNode = Node.create({
     },
 
     renderHTML({ HTMLAttributes }) {
+        const { orientation = false } = HTMLAttributes;
+
         return [
             'div',
             { class: 'node-container' },
-            ['video', mergeAttributes(HTMLAttributes, { controls: true })]
+            [
+                'video',
+                mergeAttributes(HTMLAttributes, {
+                    controls: true,
+                    class: orientation === 'vertical' ? 'vertical-video' : ''
+                })
+            ]
         ];
     }
 });
@@ -97,14 +112,18 @@ const getVideoAttrs = (attrs: DotCMSContentlet | string) => {
         return { src: attrs };
     }
 
-    const { assetMetaData, asset, assetVersion, mimeType } = attrs;
-    const { width = 'auto', height = 'auto' } = assetMetaData || {};
+    const { assetMetaData, asset, assetVersion, mineType } = attrs;
+    const { width = 'auto', height = 'auto', contentType } = assetMetaData || {};
+    const orientation = height > width ? 'vertical' : 'horizontal';
 
     return {
         src: assetVersion || asset,
-        data: attrs,
+        data: {
+            ...attrs
+        },
         width,
         height,
-        mimeType
+        mineType: mineType || contentType,
+        orientation
     };
 };