Dynamic data attribute for self hosted video, remove wrapper

Co-Authored-By: Pip <47357469+pippinpen@users.noreply.github.com>
Co-Authored-By: Alessia Amitrano <alessia.amitranobo@gmail.com>

Author: 3 people

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

@@ -1071,13 +1071,18 @@ export const SelfHostedVideo = ({
 		}
 	}
 
+	const videoStyleFormat = videoStyle.toLocaleLowerCase();
+
 	return (
 		<figure
+			css={css`
+				margin-bottom: ${space[3]}px;
+			`}
 			ref={videoContainerRef}
-			className={`video-container ${videoStyle.toLocaleLowerCase()} ${
+			className={`video-container ${videoStyleFormat} ${
 				role === 'immersive' ? 'element-video-immersive' : ''
 			}`}
-			data-component="gu-video-loop"
+			data-component={`gu-video-${videoStyleFormat}`}
 		>
 			<div
 				ref={setNode}

dotcom-rendering/src/components/SelfHostedVideoInArticle.tsx

@@ -1,5 +1,3 @@
-import { css } from '@emotion/react';
-import { space } from '@guardian/source/foundations';
 import type { FEAspectRatio } from '../frontend/feFront';
 import { isInteractive } from '../layouts/lib/interactiveLegacyStyling';
 import type { ArticleFormat } from '../lib/articleFormat';
@@ -13,10 +11,6 @@ import type { VideoPlayerFormat } from '../types/mainMedia';
 import { Island } from './Island';
 import { SelfHostedVideo } from './SelfHostedVideo.island';
 
-const containerStyles = css`
-	margin-bottom: ${space[3]}px;
-`;
-
 type SelfHostedVideoInArticleProps = {
 	element: MediaAtomBlockElement;
 	format: ArticleFormat;
@@ -49,39 +43,34 @@ export const SelfHostedVideoInArticle = ({
 	}
 
 	return (
-		<div css={containerStyles}>
-			<Island priority="critical" defer={{ until: 'visible' }}>
-				<SelfHostedVideo
-					atomId={element.id}
-					fallbackImage={posterImageUrl}
-					fallbackImageAlt={caption}
-					fallbackImageAspectRatio={
-						(firstVideoSource?.aspectRatio ??
-							'5:4') as FEAspectRatio
-					}
-					fallbackImageLoading="lazy"
-					fallbackImageSize="small"
-					aspectRatio={aspectRatio}
-					linkTo="Article-embed-MediaAtomBlockElement"
-					posterImage={posterImageUrl}
-					posterImageAspectRatio={
-						firstVideoSource?.aspectRatio ?? '5:4'
-					}
-					sources={sources}
-					subtitleSize="medium"
-					subtitleSource={getSubtitleAsset(element.assets)}
-					videoStyle={videoStyle}
-					uniqueId={element.id}
-					caption={caption}
-					format={format}
-					isMainMedia={isMainMedia}
-					role={role}
-					preventAutoplay={videoStyle === 'Default'}
-					restrictHeightOnDesktop={
-						isVerticalVideo && !isInteractive(format.design)
-					}
-				/>
-			</Island>
-		</div>
+		<Island priority="critical" defer={{ until: 'visible' }}>
+			<SelfHostedVideo
+				atomId={element.id}
+				fallbackImage={posterImageUrl}
+				fallbackImageAlt={caption}
+				fallbackImageAspectRatio={
+					(firstVideoSource?.aspectRatio ?? '5:4') as FEAspectRatio
+				}
+				fallbackImageLoading="lazy"
+				fallbackImageSize="small"
+				aspectRatio={aspectRatio}
+				linkTo="Article-embed-MediaAtomBlockElement"
+				posterImage={posterImageUrl}
+				posterImageAspectRatio={firstVideoSource?.aspectRatio ?? '5:4'}
+				sources={sources}
+				subtitleSize="medium"
+				subtitleSource={getSubtitleAsset(element.assets)}
+				videoStyle={videoStyle}
+				uniqueId={element.id}
+				caption={caption}
+				format={format}
+				isMainMedia={isMainMedia}
+				role={role}
+				preventAutoplay={videoStyle === 'Default'}
+				restrictHeightOnDesktop={
+					isVerticalVideo && !isInteractive(format.design)
+				}
+			/>
+		</Island>
 	);
 };