diff --git a/packages/lib-content/package.json b/packages/lib-content/package.json
index 167f19fa2d..f3fa32364b 100644
--- a/packages/lib-content/package.json
+++ b/packages/lib-content/package.json
@@ -30,6 +30,7 @@
"build-storybook": "storybook build"
},
"dependencies": {
+ "@next/third-parties": "~14.2.7",
"@zooniverse/async-states": "~0.0.1",
"@zooniverse/react-components": "~1.13.0",
"dayjs": "~1.11.11",
diff --git a/packages/lib-content/src/components/Article/Article.js b/packages/lib-content/src/components/Article/Article.js
index 7d87bb23f3..ca4572f31f 100644
--- a/packages/lib-content/src/components/Article/Article.js
+++ b/packages/lib-content/src/components/Article/Article.js
@@ -1,4 +1,4 @@
-import { Anchor, Box, Heading, Paragraph, ResponsiveContext } from 'grommet'
+import { Anchor, Box, Heading, Image, Paragraph, ResponsiveContext } from 'grommet'
import { string } from 'prop-types'
import { useTranslation } from '../../translations/i18n.js'
import styled from 'styled-components'
@@ -9,6 +9,10 @@ const StyledParagraph = styled(Paragraph)`
line-height: 1.2;
`
+const thumbnailSize = {
+ max: '120px',
+ min: '120px'
+}
export default function Article({
date = '',
excerpt = '',
@@ -33,11 +37,17 @@ export default function Article({
{imageSrc.length && size !== 'small' ? (
+ height={thumbnailSize}
+ width={thumbnailSize}
+ >
+
+
) : null}
@@ -54,6 +55,7 @@ export default function Highlights() {
diff --git a/packages/lib-content/src/screens/About/components/OurMission.js b/packages/lib-content/src/screens/About/components/OurMission.js
index bbc5d8dbc0..9507ea940b 100644
--- a/packages/lib-content/src/screens/About/components/OurMission.js
+++ b/packages/lib-content/src/screens/About/components/OurMission.js
@@ -16,6 +16,7 @@ import styled from 'styled-components'
import { useContext } from 'react'
import Stats from '../../../components/Stats/Stats.js'
+import { YouTubeEmbed } from '@next/third-parties/google'
const VideoWrapper = styled(Box)`
border-radius: 8px; // same as Stat component
@@ -37,7 +38,7 @@ const Discovery = ({ href, src, labelString }) => (
-
+
-
diff --git a/packages/lib-content/src/screens/Home/DefaultHome/DefaultHome.js b/packages/lib-content/src/screens/Home/DefaultHome/DefaultHome.js
index 6a0a24bdeb..779336e1c9 100644
--- a/packages/lib-content/src/screens/Home/DefaultHome/DefaultHome.js
+++ b/packages/lib-content/src/screens/Home/DefaultHome/DefaultHome.js
@@ -16,7 +16,7 @@ import Researchers from './components/Researchers.js'
import SubHeading from '../../../components/HeadingForAboutNav/SubHeading.js'
const StyledBox = styled(Box)`
- padding: 0 0 0 50px;
+ padding: 0 0 50px 0;
@media (width <= 90rem) {
padding: 0 30px 50px;
@@ -44,7 +44,6 @@ export default function DefaultHome({ dailyZooPosts = [], zooBlogPosts = [] }) {
diff --git a/packages/lib-content/src/screens/Home/DefaultHome/components/Introduction.js b/packages/lib-content/src/screens/Home/DefaultHome/components/Introduction.js
index 7fb573d810..28f4e43323 100644
--- a/packages/lib-content/src/screens/Home/DefaultHome/components/Introduction.js
+++ b/packages/lib-content/src/screens/Home/DefaultHome/components/Introduction.js
@@ -6,6 +6,7 @@ import { useTranslation } from '../../../../translations/i18n.js'
import Stats from '../../../../components/Stats/Stats.js'
import SubHeading from '../../../../components/HeadingForAboutNav/SubHeading.js'
+import { YouTubeEmbed } from '@next/third-parties/google'
const StyledSignIn = styled(Button)`
width: 47%;
@@ -115,13 +116,11 @@ export default function Introduction() {
-
>
diff --git a/packages/lib-content/src/screens/Home/DefaultHome/components/Researchers.js b/packages/lib-content/src/screens/Home/DefaultHome/components/Researchers.js
index 23038bd23d..7fa0980688 100644
--- a/packages/lib-content/src/screens/Home/DefaultHome/components/Researchers.js
+++ b/packages/lib-content/src/screens/Home/DefaultHome/components/Researchers.js
@@ -1,4 +1,5 @@
import { Anchor, Box, Paragraph } from 'grommet'
+import { YouTubeEmbed } from '@next/third-parties/google'
import { useTranslation } from '../../../../translations/i18n.js'
import styled, { css } from 'styled-components'
import { SpacedHeading } from '@zooniverse/react-components'
@@ -62,9 +63,9 @@ const VideoWrapper = styled(Box)`
`
const YOUTUBE_SOURCES = [
- 'https://www.youtube-nocookie.com/embed/CaTNIoJy4Dg?si=-rG8luvWD_FtFBc5', // PH TESS
- 'https://www.youtube-nocookie.com/embed/8lZiZoBcMjE?si=wPKWlRjQcKeTIOB5', // Wildcam Gorongosa
- 'https://www.youtube-nocookie.com/embed/B6diEbpEblQ?si=tt3jtcINdleiBT8g' // Backyard Worlds
+ ['CaTNIoJy4Dg', 'Around the Zoo – Planet Hunters TESS'],
+ ['8lZiZoBcMjE', 'Around the Zoo – Wildcam Gorongosa'],
+ ['B6diEbpEblQ', 'Around the Zoo – Backyard Worlds'],
]
export default function Researchers() {
@@ -93,15 +94,13 @@ export default function Researchers() {
pad={{ horizontal: 'xxsmall', bottom: 'xsmall' }}
overflow={{ horizontal: 'auto' }}
>
- {YOUTUBE_SOURCES.map(src => (
-
-