Set if looping videos can play inline on a front (#14107)

* Make use of the canPlayInline card property to dictate if looping videos can play on a front

* Explicitly set canPlayInline to false when the video is looping.

Author: abeddow91

dotcom-rendering/src/components/Card/Card.tsx

@@ -254,7 +254,7 @@ const getMedia = ({
 	canPlayInline?: boolean;
 	isBetaContainer: boolean;
 }) => {
-	if (mainMedia?.type === 'LoopVideo') {
+	if (mainMedia?.type === 'LoopVideo' && canPlayInline) {
 		return {
 			type: 'loop-video',
 			mainMedia,
@@ -887,18 +887,18 @@ export const Card = ({
 								/>
 							</AvatarContainer>
 						)}
-						{mainMedia?.type === 'LoopVideo' && (
+						{media.type === 'loop-video' && (
 							<Island
 								priority="feature"
 								defer={{ until: 'visible' }}
 							>
 								<LoopVideo
-									src={mainMedia.videoId}
-									height={mainMedia.height}
-									width={mainMedia.width}
-									videoId={mainMedia.videoId}
+									src={media.mainMedia.videoId}
+									height={media.mainMedia.height}
+									width={media.mainMedia.width}
+									videoId={media.mainMedia.videoId}
 									thumbnailImage={
-										mainMedia.thumbnailImage ?? ''
+										media.mainMedia.thumbnailImage ?? ''
 									}
 									fallbackImageComponent={
 										<CardPicture

dotcom-rendering/src/components/FlexibleGeneral.tsx

@@ -99,6 +99,8 @@ const ImmersiveCardLayout = ({
 	imageLoading: Loading;
 	collectionId: number;
 }) => {
+	const isLoopingVideo = card.mainMedia?.type === 'LoopVideo';
+
 	return (
 		<UL padBottom={true}>
 			<LI key={card.url} padSides={true}>
@@ -113,7 +115,7 @@ const ImmersiveCardLayout = ({
 					kickerText={card.kickerText}
 					showClock={false}
 					image={card.image}
-					canPlayInline={true}
+					canPlayInline={isLoopingVideo ? false : true}
 					starRating={card.starRating}
 					dataLinkName={card.dataLinkName}
 					discussionApiUrl={card.discussionApiUrl}

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

@@ -38,6 +38,7 @@ export const ScrollableFeature = ({
 			visibleCarouselSlidesOnTablet={3}
 		>
 			{trails.map((card) => {
+				const isLoopingVideo = card.mainMedia?.type === 'LoopVideo';
 				return (
 					<ScrollableCarousel.Item key={card.url}>
 						<FeatureCard
@@ -54,7 +55,7 @@ export const ScrollableFeature = ({
 							}
 							showClock={false}
 							image={card.image}
-							canPlayInline={true}
+							canPlayInline={isLoopingVideo ? false : true}
 							starRating={card.starRating}
 							dataLinkName={card.dataLinkName}
 							discussionApiUrl={card.discussionApiUrl}

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

@@ -71,6 +71,7 @@ export const ScrollableMedium = ({
 							showLivePlayable={trail.showLivePlayable}
 							showTopBarDesktop={false}
 							showTopBarMobile={false}
+							canPlayInline={false}
 						/>
 					</ScrollableCarousel.Item>
 				);

dotcom-rendering/src/components/StaticFeatureTwo.tsx

@@ -33,10 +33,10 @@ export const StaticFeatureTwo = ({
 	collectionId,
 }: Props) => {
 	const cards = trails.slice(0, 2);
-
 	return (
 		<UL direction="row">
 			{cards.map((card) => {
+				const isLoopingVideo = card.mainMedia?.type === 'LoopVideo';
 				return (
 					<LI
 						stretch={false}
@@ -59,7 +59,7 @@ export const StaticFeatureTwo = ({
 							}
 							showClock={false}
 							image={card.image}
-							canPlayInline={true}
+							canPlayInline={isLoopingVideo ? false : true}
 							starRating={card.starRating}
 							dataLinkName={card.dataLinkName}
 							discussionApiUrl={card.discussionApiUrl}