From e191b126bd49659acd68fc46ccada567a8ae4a64 Mon Sep 17 00:00:00 2001 From: Jake Lee Kennedy Date: Thu, 5 Oct 2023 15:45:35 +0100 Subject: [PATCH 1/3] Add CSS for YouTube IMA ad container --- .../src/components/MaintainAspectRatio.tsx | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/dotcom-rendering/src/components/MaintainAspectRatio.tsx b/dotcom-rendering/src/components/MaintainAspectRatio.tsx index 27466063ff2..1615575e9d5 100644 --- a/dotcom-rendering/src/components/MaintainAspectRatio.tsx +++ b/dotcom-rendering/src/components/MaintainAspectRatio.tsx @@ -21,6 +21,24 @@ export const MaintainAspectRatio = ({ height, width, children }: Props) => ( top: 0; left: 0; } + + /* + The IMA script gives the following styles to the ad container element: + width: [pixel value equal to the youtube iframe's width] + height: [pixel value equal to the youtube iframe's height] + position: relative; + display: block; + We need to override these styles to make sure that the ad container overlays + the youtube player exactly and to avoid a player-sized white space underneath the ad. + */ + [data-atom-type='ima-ad-container'] { + width: 100%; + height: 100%; + position: absolute !important; + top: 0; + left: 0; + display: none; + } `} > {children} From ff0a88d6101c5f32493be4988df87a141d6a7658 Mon Sep 17 00:00:00 2001 From: Jake Lee Kennedy Date: Thu, 5 Oct 2023 16:04:30 +0100 Subject: [PATCH 2/3] add stylelint ignore --- dotcom-rendering/src/components/MaintainAspectRatio.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/dotcom-rendering/src/components/MaintainAspectRatio.tsx b/dotcom-rendering/src/components/MaintainAspectRatio.tsx index 1615575e9d5..51a140ce2cb 100644 --- a/dotcom-rendering/src/components/MaintainAspectRatio.tsx +++ b/dotcom-rendering/src/components/MaintainAspectRatio.tsx @@ -34,6 +34,7 @@ export const MaintainAspectRatio = ({ height, width, children }: Props) => ( [data-atom-type='ima-ad-container'] { width: 100%; height: 100%; + /* stylelint-disable-next-line declaration-no-important -- we need this to override inline styles added by youtube */ position: absolute !important; top: 0; left: 0; From 648ccb356abe850b04574c4b02718b43e0705b2a Mon Sep 17 00:00:00 2001 From: Jake Lee Kennedy Date: Fri, 6 Oct 2023 12:23:49 +0100 Subject: [PATCH 3/3] move styles to the player component --- .../src/components/MaintainAspectRatio.tsx | 19 --------------- .../YoutubeAtom/YoutubeAtomPlayer.tsx | 23 +++++++++++++++++++ 2 files changed, 23 insertions(+), 19 deletions(-) diff --git a/dotcom-rendering/src/components/MaintainAspectRatio.tsx b/dotcom-rendering/src/components/MaintainAspectRatio.tsx index 51a140ce2cb..27466063ff2 100644 --- a/dotcom-rendering/src/components/MaintainAspectRatio.tsx +++ b/dotcom-rendering/src/components/MaintainAspectRatio.tsx @@ -21,25 +21,6 @@ export const MaintainAspectRatio = ({ height, width, children }: Props) => ( top: 0; left: 0; } - - /* - The IMA script gives the following styles to the ad container element: - width: [pixel value equal to the youtube iframe's width] - height: [pixel value equal to the youtube iframe's height] - position: relative; - display: block; - We need to override these styles to make sure that the ad container overlays - the youtube player exactly and to avoid a player-sized white space underneath the ad. - */ - [data-atom-type='ima-ad-container'] { - width: 100%; - height: 100%; - /* stylelint-disable-next-line declaration-no-important -- we need this to override inline styles added by youtube */ - position: absolute !important; - top: 0; - left: 0; - display: none; - } `} > {children} diff --git a/dotcom-rendering/src/components/YoutubeAtom/YoutubeAtomPlayer.tsx b/dotcom-rendering/src/components/YoutubeAtom/YoutubeAtomPlayer.tsx index f057012a070..cb7c5d94d32 100644 --- a/dotcom-rendering/src/components/YoutubeAtom/YoutubeAtomPlayer.tsx +++ b/dotcom-rendering/src/components/YoutubeAtom/YoutubeAtomPlayer.tsx @@ -1,3 +1,4 @@ +import { css } from '@emotion/react'; import type { Participations } from '@guardian/ab-core'; import type { AdsConfig } from '@guardian/commercial'; import { @@ -81,6 +82,27 @@ type PlayerListeners = Array>; */ type ExtractEventType = T extends YT.PlayerEventHandler ? X : never; +const imaAdContainerStyles = css` + /* + The IMA script gives the following styles to the ad container element: + width: [pixel value equal to the youtube iframe's width] + height: [pixel value equal to the youtube iframe's height] + position: relative; + display: block; + We need to override these styles to make sure that the ad container overlays + the youtube player exactly and to avoid a player-sized white space underneath the ad. + */ + /* stylelint-disable-next-line declaration-no-important -- we need this to override inline styles added by youtube */ + width: 100% !important; + /* stylelint-disable-next-line declaration-no-important -- we need this to override inline styles added by youtube */ + height: 100% !important; + /* stylelint-disable-next-line declaration-no-important -- we need this to override inline styles added by youtube */ + position: absolute !important; + top: 0; + left: 0; + display: none; +`; + const dispatchCustomPlayEvent = (uniqueId: string) => { document.dispatchEvent( new CustomEvent(customPlayEventName, { @@ -630,6 +652,7 @@ export const YoutubeAtomPlayer = ({
)}