Research Readout

Reels on PetalsWings.com

How the best brands showcase vertical video on their websites — and what works for a family iris farm.

The Opportunity

Why Reels on the Website?

Bonnie's reels show the real farm — real flowers, real work, real personality. That authenticity is impossible to fake with stock photos. Embedding reels directly on the site does 3 things:

1. Social proof — Visitors see real content from a real person (not just a logo and stock imagery).
2. Time-on-site — Video keeps visitors browsing longer, which improves SEO signals and conversion rates.
3. Content recycling — Every reel Bonnie posts on Facebook/Instagram automatically becomes website content too.

Layout Patterns

6 Ways Brands Showcase Reels

A. Horizontal Scroll Strip

4-6 vertical video thumbnails in a horizontal row, scrollable with arrows or swipe. Click to play in a lightbox or inline expand.

Who uses it: Glossier, Gymshark, fashion/beauty DTC brands

Best for PW ADA Friendly

B. Instagram Stories Bubbles

Circular thumbnails (like Instagram stories) — tap to open fullscreen vertical video player. Often labeled: "Garden Tour", "Bloom Time", "Packing Day".

Who uses it: Shopify stores (Tolstoy widget), food/lifestyle brands

Engaging Familiar UX
play_circle Full-width background video
(muted autoplay)

C. Full-Width Background Video

A single reel plays as a muted, looping background behind a text overlay. Premium feel, but only shows one video at a time.

Who uses it: Floret Flowers (hero), luxury brands, wineries

Premium Feel Performance Cost
Text content / story

D. Paired with Content (Current)

Single reel embedded next to text — like we have now in Our Story. Works great for one hero reel, but doesn't scale to multiple videos.

Who uses it: PetalsWings (current), small business about pages

Simple One Video Only

E. TikTok-Style Vertical Feed

Full-height vertical scroll — swipe up for next video. Immersive but pulls the visitor completely out of the shopping experience.

Who uses it: TikTok Shop embeds, media sites

Disruptive Not Ecommerce-Friendly

F. Mixed Media Grid

Reels mixed with photos in a Pinterest-style masonry grid. Great for showing variety, but can look cluttered without strong curation.

Who uses it: Lifestyle blogs, UGC-heavy brands, wedding industry

Content Rich Needs Curation

Technical Options

How to Get Reels on the Site

Method Auto-Update? Cost Loop? Custom Style? Notes
Facebook iframe embed
(what we have now)
No — manual per reel Free FB controls No Simple but fragile — FB can change embed rules. No custom player. Limited styling.
Self-hosted MP4s
(download reels, host on CF)
No — manual upload Free Yes ✓ Full control ✓ Best option for PW. Download reels, convert to MP4, host on Cloudflare. Full control over autoplay, loop, mute, poster image, sizing. Zero third-party dependencies.
Instagram oEmbed
(official API)
No — per reel Free No No Shows full IG chrome (username, likes, comments). Looks like an embed, not part of your site.
Curator.io / Juicer
(aggregator)
Yes ✓ $0-25/mo Varies Yes ✓ Auto-pulls new reels from IG/FB. Free tier = 1 feed, branding. Good if Bonnie posts frequently and you want zero maintenance.
Tolstoy / Videowise
(shoppable video)
Yes ✓ $19-99/mo Yes ✓ Yes ✓ Stories bubbles + shoppable tags on video. Premium, but overkill for PW's scale. Best for high-volume Shopify stores with 50+ products tagged in reels.

Looping

Making the Reel Loop

The Facebook iframe embed does not natively loop — it plays once and shows replay. Two fixes:

Option 1: Self-hosted MP4 (recommended)

Download the reel from Facebook, save as MP4, upload to the repo. Use a native <video> tag with autoplay muted loop playsinline. This gives full control — loops forever, muted by default (ADA + autoplay policy compliant), custom poster image, no FB branding.

Option 2: Keep iframe, add JS restart

Possible but hacky — listen for the iframe's video end event (unreliable cross-origin) or use a timer to refresh the iframe periodically. Not recommended — fragile and creates a flash on reload.

For PetalsWings

What I'd Build

🌿 Recommendation: Horizontal Reel Strip + Self-Hosted MP4s

Combine patterns A + D: Keep one featured reel paired with Our Story text (current), PLUS add a new "From the Garden" horizontal reel strip section elsewhere on the homepage.

The Reel Strip Section

  • 4-5 vertical video thumbnails in a horizontal scroll strip
  • Each reel has a poster image (first frame) + play button overlay
  • Click opens a lightbox player (no page navigation)
  • Each reel gets a caption label underneath: "Garden Tour", "Packing Day", "Bloom Update", etc.
  • Autoplay on hover (muted) — gives a preview feel like Netflix
  • Self-hosted MP4s — no third-party dependencies, loops built-in

Why Self-Hosted > Facebook Embed

  • Loops natively<video loop> just works
  • No FB branding — looks like YOUR site, not a Facebook widget
  • Fast loading — served from Cloudflare CDN (same as the site)
  • ADA compliant — muted autoplay is fine, captions can be added, keyboard accessible
  • Zero cost — MP4s served from your existing Cloudflare Pages deploy
  • Doesn't break — no reliance on Facebook's embed API staying stable

Effort

You send me 5-6 of Bonnie's best reels (or links to them). I'll download, compress for web (~2-4MB each), and build the strip section + lightbox player. Same session. $0 cost

Where to Place Reels

Homepage Section Flow (Updated)

Here's where the reel sections fit in the current homepage flow:

#SectionReel Integration
1Utility Bar
2Nav
3HeroOption: Reel as hero bg video (Pattern C) — premium but heavy
4Trust Bar
5Collections
6Best Sellers
7Our Story✅ Single featured reel (current — keep this)
8Testimonials
NEW"From the Garden" Reel Strip✅ 4-5 reels, horizontal scroll, lightbox player
9Blog / Growing Guides
10Shipping Timeline
11Newsletter
12Footer

Next Steps

What I Need From You

1. Pick a layout pattern (A through F) — I recommend A (Horizontal Strip)
2. Send me 5-6 of Bonnie's best reels (Facebook/Instagram links or the video files directly)
3. Give each one a short label (e.g., "Garden Tour", "Spring Blooms", "Packing Orders")
4. I'll build it in the same session — self-hosted MP4s, custom player, looping, ADA-compliant