Youtube Thumbnails

Store Design
,

Topic summary

Oversized YouTube embeds on pages using the Pipeline theme; request to make thumbnails appear smaller.

Proposed fix: edit theme code (Assets > theme.css) and append custom CSS targeting YouTube embed iframes inside the page content wrapper.

Key CSS changes: set the iframe to position: static, width/height to revert to defaults, and cap width at 100%. Remove padding-bottom on the .rte__video-wrapper to avoid enforced aspect ratio. Add a mobile media query (max-width: 560px) that sets iframe height to 56vw to maintain a 16:9 look.

Notes: the code snippet and a screenshot showing where to edit theme files are central to applying the fix. “iframe” refers to the embedded video frame; a “media query” applies CSS at specific screen sizes.

Status: no confirmation yet from the original poster; outcome unresolved/awaiting feedback on whether the CSS adjustment meets the sizing goal.

Summarized with AI on December 24. AI used: gpt-5.
1

Hello I have added Youtube videos to a few pages on my Pipeline site, but the thumbnails are huge. How do I make them smaller?

2

Hi @stevenunstick ,

May I suggest to update code these steps:

  1. Go to Store Online-> theme → edit code

EBOOST_1-1672356985580.png
EBOOST_1-1672356985580.png532×438 15.6 KB

  1. Assets/theme.css
  2. Add code below to end of file
#MainContent .page__template .rte__video-wrapper iframe[src^="https://www.youtube.com/embed"] {
	position: static;
  width: revert-layer;
  height: revert-layer;
  max-width: 100%;
}
#MainContent .page__template .rte__video-wrapper {
	padding-bottom: 0;
  }
  @media(max-width: 560px){
  #MainContent .page__template .rte__video-wrapper iframe[src^="https://www.youtube.com/embed"] {
  height: 56vw;
}
}