5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:T976,

Theater Video Player is a customizable video component for Framer, built for moments where a simple embed feels too plain and fullscreen feels too heavy.

It works well for short presentation videos, product demos, portfolio reels, intro videos, SaaS landing pages, and visual case studies. Place it inside a hero section, product block, portfolio page, or content section, then let visitors expand the video into a smooth theater view without disrupting the whole layout.

Key Features

• URL or uploaded video source

• Thumbnail support before playback

• Responsive aspect ratios: 16:9, 9:16, 1:1, and 4:5

• Smooth theater mode for desktop viewing

• Native mobile fullscreen fallback

• Custom play, mute, progress, and expand controls

• Auto-hide controls option

• Loop, autoplay, and muted start options

• Glass frame styling with blur, padding, radius, border, and color controls

• Custom progress color and control button styling

How to Use

1. Drop the component onto your Framer canvas.

2. Choose a video source: paste a URL or upload a file.

3. Add an optional thumbnail image.

4. Pick the aspect ratio that fits your layout.

5. Adjust the glass frame and control styles from the property panel.

6. Publish.

Use Cases

• Hero section videos

• SaaS product demos

• Portfolio showreels

• Product presentation videos

• Founder or creator intro videos

• Landing page media blocks

• Case study walkthroughs

• Short educational or tutorial clips

Why Theater Mode?

Most video embeds are either small inside the layout or jump straight into fullscreen. Theater Video Player gives visitors a middle step: they can expand the video into a focused viewing mode, watch what they need, then close it and return to the page.

5a:[["$","$L5d",null,{"post":{"id":"019e7a68-78bd-74d7-8001-b97c35949e54","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"f3ccc875-c409-42ec-982f-0d1936328136","name":"Denys Kuznietsov","slug":"denys-kuznietsov","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/534102/avatar-Yc414Lzx2iqsQ8sGXxE4eaKTDmerx6.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"1KoYYjpwTRxtezINCr27","resolved":true,"title":"Theater Video Player","body":"$5e","bodyJson":null,"introduction":"Video player with theater mode & ratios","slug":"frostedplayer","author":{"framerUserId":"f3ccc875-c409-42ec-982f-0d1936328136","name":"Denys Kuznietsov","slug":"denys-kuznietsov","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/534102/avatar-Yc414Lzx2iqsQ8sGXxE4eaKTDmerx6.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/1KoYYjpwTRxtezINCr27/frostedplayer-VXD0oBewwkHIOwCr8CJ5GW3ontxT7R","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-05-24T17:18:38.094Z","updatedAt":"2026-07-08T17:13:05.760Z","publishedAt":"2026-05-30T19:42:07.549Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://hy.chujiqiqi.com/m/Theater-Video-Player-86RQUw.js@Hq0yONYiKWujDb5ZNmzE","previewUrl":"https://theatervideoplayer.framer.website/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"ae04a700-60cc-429a-b133-88f3c9709ec0","name":"Players","slug":"players"}],"lastSaveId":"Hq0yONYiKWujDb5ZNmzE","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":81,"liked":false},"comments":{"count":2},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-05-30T19:42:07.549Z","updatedAt":"2026-05-30T19:42:07.549Z","reported":false}}],"$L5f"]

Suggested for you