Show the video full width on mobile

Author: domlander

dotcom-rendering/src/components/SelfHostedVideo.importable.tsx

@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
 import { log, storage } from '@guardian/libs';
-import { space } from '@guardian/source/foundations';
+import { from, space } from '@guardian/source/foundations';
 import { SvgAudio, SvgAudioMute } from '@guardian/source/react-components';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import {
@@ -41,7 +41,12 @@ const videoAndBackgroundStyles = css`
 const videoContainerStyles = (width: number, height: number) => css`
 	position: relative;
 	height: 100%;
-	width: ${(width / height) * 80}%;
+	max-height: 100vh;
+	max-height: 100svh;
+	max-width: 100%;
+	${from.tablet} {
+		max-width: ${(width / height) * 80}%;
+	}
 `;
 
 const cinemagraphContainerStyles = css`

dotcom-rendering/src/frontend/schemas/feFront.json

@@ -3240,6 +3240,14 @@
                 "activeVersion": {
                     "type": "number"
                 },
+                "videoPlayerFormat": {
+                    "enum": [
+                        "Cinemagraph",
+                        "Default",
+                        "Loop"
+                    ],
+                    "type": "string"
+                },
                 "dimensions": {
                     "type": "object",
                     "properties": {
@@ -4092,4 +4100,4 @@
         }
     },
     "$schema": "http://json-schema.org/draft-07/schema#"
-}
+}

dotcom-rendering/src/frontend/schemas/feTagPage.json

@@ -1413,6 +1413,14 @@
                 "activeVersion": {
                     "type": "number"
                 },
+                "videoPlayerFormat": {
+                    "enum": [
+                        "Cinemagraph",
+                        "Default",
+                        "Loop"
+                    ],
+                    "type": "string"
+                },
                 "dimensions": {
                     "type": "object",
                     "properties": {
@@ -2006,4 +2014,4 @@
         }
     },
     "$schema": "http://json-schema.org/draft-07/schema#"
-}
+}