From 1cd259b384fb2e39eea28f54134ee5a3464015c8 Mon Sep 17 00:00:00 2001 From: Jake Lee Kennedy Date: Fri, 6 Oct 2023 12:57:44 +0100 Subject: [PATCH] Fix stretched IMA video container (#9036) --- .../YoutubeAtom/YoutubeAtomPlayer.tsx | 23 +++++++++++++++++++ 1 file changed, 23 insertions(+) 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 = ({
)}