# Player Deck / Grid Player Deck is a shoppable embed presentation that surfaces a video and its product card together, so shoppers can browse content and reach the relevant product detail page in fewer clicks. Player Deck is derived from the Embed Feed layout: each tile pairs an autoplaying video thumbnail with a product card directly beneath it, and many Embed Feed and Player attributes apply. Player Deck supports two presentations:

^{_{Player Deck Player Deck Grid}} * **Player Deck** — a horizontally scrollable row of video + product tiles. Best for product discovery surfaces, category pages, and content rows on a homepage. * **Player Deck Grid** — the same tile, arranged as a multi-column responsive grid. Best for dedicated browse pages or PLP-style discovery pages where the deck is the primary unit on the page. ### Integration Place the script tags either in the ``, the ``, or directly above the Firework component you are adding. Replace `{BUSINESS_ID}`, `{CHANNEL}`, and `{PLAYLIST_ID}` with your own values — the Advanced Embed builder in the Business Portal fills these in for you automatically. #### Player Deck ```html ``` #### Player Deck Grid ```html ``` ### Attributes In addition to the attributes below, Player Deck inherits **Player Attributes** (which control player behavior) and **Feed Attributes** (which decide what content is displayed). You can configure any Embed Feed attribute on Player Deck as well. | Name | Description | Default | | ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | | `mode` | `row` or `grid`. Selects Player Deck (`row`) or Player Deck Grid (`grid`). Grid supports a single-column layout as a special case. | `row` | | `channel` | Source channel identifier for the feed. | — | | `playlist` | Optional playlist ID. Works in conjunction with `channel`. | — | | `playlist_collection` | Optional playlist collection ID. Works in conjunction with `channel`. | — | | `max_videos` | Limits the number of videos loaded. In grid mode the grid is loaded in chunks but capped at this value. | — | | `paginate_by` | Used in grid mode to paginate the next chunk of rows behind a Load more button. The value is fuzzy to avoid orphan or incomplete rows. | — | | `autoplay` | `true` or `false`. Whether the first visible thumbnail autoplays. | `true` | | `captions` | `true` or `false`. Show captions (titles) for autoplayed thumbnails. | `true` | | `open_in` | Where a thumbnail click opens the player. `default` opens the modal player when possible, falling back to `_blank`. Other values: `_self`, `_blank`. | `default` | | `shopping_quick_add` | Boolean. Enables the quick-add (single-variant) button on the product card. Currently only used on Player Deck. Only appears for eligible products hydrated by the shopping integration. | `false` | | `shopping_quick_view` | Boolean. Enables the quick-view (multi-variant) button on the product card. Currently only used on Player Deck. Only appears for eligible products on supported themes. | `false` | | `product_tag_placement` | `top`, `bottom`, or `false`. Positions or hides the product tag on a thumbnail. | `top` | | `thumbnail_cta` | Render CTAs inside the carousel thumbnail. | `false` | | `thumbnail_product_card` | Display the product card inside the thumbnail in addition to the deck slot. | `false` | | `size` | Thumbnail size. Adjusts thumbnail size in row mode. Does not apply to grid. | `large` | | `title` | Title rendered above the unit in grid mode. Defaults to a localized Stories and Short Videos. | — | #### Shopping behavior Player Deck supports two shopping interactions on the product card: * **Quick Add** — appears for single-variant products that are available and in stock. Clicking the button adds one unit of that product to the cart. Cart UI is updated automatically on supported themes; otherwise a custom integration is required. * **Quick View** — appears for multi-variant products on supported themes (e.g. Shopify Dawn). Clicking the button opens the theme's variant picker so the shopper can choose their preferred option before adding to cart. A product must be available, in stock, and hydrated by the shopping integration for either button to render. Setting `shopping_quick_add` or `shopping_quick_view` enables the UI, but it will not appear for ineligible products. #### Events Player Deck emits the following custom events on the document. Listen to them to integrate with cart drawers, analytics, or theme-specific flows. | Event | Payload | Fires when | | ------------------------------------------- | ---------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `fw:shopping:player-deck-add-to-cart-click` | `{ product: Api_Product, product_id: string }` | The add-to-cart button is clicked on a Player Deck product card. If you are integrating a custom Quick Add modal, listen here and check `product.product_units.length > 1` to open the theme's modal with the given product. | | `fw:shopping:cart-updated` | `{ product: Api_Product, product_id: string }` | The add-to-cart button is clicked on a single-variant product and the item is successfully added to the cart. | #### Styling Player Deck is themed using the same CSS variables as Embed Feed. A few that are commonly customized on Player Deck: | CSS variable | Description | | -------------------- | ------------------------------------------------------------------------- | | `--fw-thumbnail-gap` | Gap between tiles. Increase to add whitespace between videos in the deck. | Set these on the embedding page's root element or on the `fw-player-deck` element itself. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.firework.com/firework-for-developers/web/integration-guide/components/player-deck-grid.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.