Changes for Classic Player Styles

Reference guide for recent updates and changes to Firework's classic video player style configurations.

Last updated:
January 28, 2026
Help
Get Started With Firework
Changes for Classic Player Styles
Circular representation of the United States flag with red and white stripes and white stars on a blue field.
English
Table of Contents
h2
Example H2
h3
Example H3
h4
Example H4
h5
Example H5
h6
Example H6
<div style="overflow-x: auto; -webkit-overflow-scrolling: touch">
  <table style="width: 100%; min-width: 860px; border-collapse: collapse; font-size: 13.5px; table-layout: auto">
    <thead>
      <tr style="border-bottom: 1.5px solid #ccc">
        <th style="min-width: 100px; padding: 10px 14px; text-align: left; font-weight: 500; font-size: 12px; color: #666; letter-spacing: 0.04em; text-transform: uppercase"></th>
        <th style="min-width: 120px; padding: 10px 14px; text-align: left; font-weight: 500; font-size: 12px; color: #666; letter-spacing: 0.04em; text-transform: uppercase"></th>
        <th style="min-width: 180px; padding: 10px 14px; text-align: left; font-weight: 500; font-size: 12px; color: #666; letter-spacing: 0.04em; text-transform: uppercase">Existing behavior for classic playerstyles</th>
        <th style="min-width: 200px; padding: 10px 14px; text-align: left; font-weight: 500; font-size: 12px; color: #666; letter-spacing: 0.04em; text-transform: uppercase; background: #f5e0e0">New behavior for classic playerstyles (these are the new changes)</th>
        <th style="min-width: 180px; padding: 10px 14px; text-align: left; font-weight: 500; font-size: 12px; color: #666; letter-spacing: 0.04em; text-transform: uppercase">Existing behavior for modern playerStyles (behavior unchanged)</th>
      </tr>
    </thead>
    <tbody>
      <!-- LIVESTREAM section header -->
      <tr style="border-bottom: 0.5px solid #e5e5e5; background: #fafafa">
        <td colspan="5" style="padding: 8px 14px; font-size: 13px; font-weight: 700; line-height: 1.5">Livestream</td>
      </tr>

      <!-- Interactions sub-header -->
      <tr style="border-bottom: 0.5px solid #e5e5e5">
        <td style="padding: 8px 14px; line-height: 1.5"></td>
        <td style="padding: 8px 14px; line-height: 1.5; font-size: 12.5px; color: #555; font-weight: 500; font-family: monospace">interactions</td>
        <td style="padding: 8px 14px; line-height: 1.5"></td>
        <td style="padding: 8px 14px; line-height: 1.5; background: #fce8e8"></td>
        <td style="padding: 8px 14px; line-height: 1.5"></td>
      </tr>

      <!-- Giveaway -->
      <tr style="border-bottom: 0.5px solid #e5e5e5">
        <td style="padding: 8px 14px; line-height: 1.5"></td>
        <td style="padding: 8px 14px; line-height: 1.5"></td>
        <td style="padding: 8px 14px; line-height: 1.5">classic giveaway</td>
        <td style="padding: 8px 14px; line-height: 1.5; background: #fce8e8">modern giveaway</td>
        <td style="padding: 8px 14px; line-height: 1.5">modern giveaway</td>
      </tr>

      <!-- Poll -->
      <tr style="border-bottom: 0.5px solid #e5e5e5">
        <td style="padding: 8px 14px; line-height: 1.5"></td>
        <td style="padding: 8px 14px; line-height: 1.5"></td>
        <td style="padding: 8px 14px; line-height: 1.5">classic poll</td>
        <td style="padding: 8px 14px; line-height: 1.5; background: #fce8e8">modern poll</td>
        <td style="padding: 8px 14px; line-height: 1.5">modern poll</td>
      </tr>

      <!-- Question -->
      <tr style="border-bottom: 0.5px solid #e5e5e5">
        <td style="padding: 8px 14px; line-height: 1.5"></td>
        <td style="padding: 8px 14px; line-height: 1.5"></td>
        <td style="padding: 8px 14px; line-height: 1.5">classic question</td>
        <td style="padding: 8px 14px; line-height: 1.5; background: #fce8e8">modern question</td>
        <td style="padding: 8px 14px; line-height: 1.5">modern question</td>
      </tr>

      <!-- Trivia giveaway -->
      <tr style="border-bottom: 0.5px solid #e5e5e5">
        <td style="padding: 8px 14px; line-height: 1.5"></td>
        <td style="padding: 8px 14px; line-height: 1.5"></td>
        <td style="padding: 8px 14px; line-height: 1.5">no trivia giveaway support</td>
        <td style="padding: 8px 14px; line-height: 1.5; background: #fce8e8">modern trivia giveaway</td>
        <td style="padding: 8px 14px; line-height: 1.5">modern trivia giveaway</td>
      </tr>

      <!-- Interaction visibility -->
      <tr style="border-bottom: 0.5px solid #e5e5e5">
        <td style="padding: 8px 14px; line-height: 1.5"></td>
        <td style="padding: 8px 14px; line-height: 1.5"></td>
        <td style="padding: 8px 14px; line-height: 1.5">one interaction visible at a time</td>
        <td style="padding: 8px 14px; line-height: 1.5; background: #fce8e8">multiple interactions exist at a time, interactions collapse into video header pills</td>
        <td style="padding: 8px 14px; line-height: 1.5">multiple interactions exist at a time, interactions collapse into video header pills</td>
      </tr>

      <!-- Product cards sub-header -->
      <tr style="border-bottom: 0.5px solid #e5e5e5">
        <td style="padding: 8px 14px; line-height: 1.5"></td>
        <td style="padding: 8px 14px; line-height: 1.5; font-size: 12.5px; color: #555; font-weight: 500; font-family: monospace">product cards</td>
        <td style="padding: 8px 14px; line-height: 1.5">vertically stacked product cards</td>
        <td style="padding: 8px 14px; line-height: 1.5; background: #fce8e8">vertically stacked product cards</td>
        <td style="padding: 8px 14px; line-height: 1.5">horizontally swipeable product cards</td>
      </tr>

      <!-- Chat sub-header -->
      <tr style="border-bottom: 0.5px solid #e5e5e5">
        <td style="padding: 8px 14px; line-height: 1.5"></td>
        <td style="padding: 8px 14px; line-height: 1.5; font-size: 12.5px; color: #555; font-weight: 500; font-family: monospace">chat</td>
        <td style="padding: 8px 14px; line-height: 1.5">classic chat</td>
        <td style="padding: 8px 14px; line-height: 1.5; background: #fce8e8">modern chat, collapsible, displays side-by-side with stacked product cards</td>
        <td style="padding: 8px 14px; line-height: 1.5">modern chat, displays above product cards</td>
      </tr>

      <!-- SHORT VIDEO section header -->
      <tr style="border-bottom: 0.5px solid #e5e5e5; background: #fafafa">
        <td colspan="5" style="padding: 8px 14px; font-size: 13px; font-weight: 700; line-height: 1.5">Short Video</td>
      </tr>

      <!-- Interactions sub-header -->
      <tr style="border-bottom: 0.5px solid #e5e5e5">
        <td style="padding: 8px 14px; line-height: 1.5"></td>
        <td style="padding: 8px 14px; line-height: 1.5; font-size: 12.5px; color: #555; font-weight: 500; font-family: monospace">interactions</td>
        <td style="padding: 8px 14px; line-height: 1.5"></td>
        <td style="padding: 8px 14px; line-height: 1.5; background: #fce8e8"></td>
        <td style="padding: 8px 14px; line-height: 1.5"></td>
      </tr>

      <!-- Poll -->
      <tr style="border-bottom: 0.5px solid #e5e5e5">
        <td style="padding: 8px 14px; line-height: 1.5"></td>
        <td style="padding: 8px 14px; line-height: 1.5"></td>
        <td style="padding: 8px 14px; line-height: 1.5">classic poll</td>
        <td style="padding: 8px 14px; line-height: 1.5; background: #fce8e8">modern poll</td>
        <td style="padding: 8px 14px; line-height: 1.5">modern poll</td>
      </tr>

      <!-- Question -->
      <tr style="border-bottom: 0.5px solid #e5e5e5">
        <td style="padding: 8px 14px; line-height: 1.5"></td>
        <td style="padding: 8px 14px; line-height: 1.5"></td>
        <td style="padding: 8px 14px; line-height: 1.5">classic question</td>
        <td style="padding: 8px 14px; line-height: 1.5; background: #fce8e8">modern question</td>
        <td style="padding: 8px 14px; line-height: 1.5">modern question</td>
      </tr>

      <!-- Product cards sub-header -->
      <tr style="border-bottom: 0.5px solid #e5e5e5">
        <td style="padding: 8px 14px; line-height: 1.5"></td>
        <td style="padding: 8px 14px; line-height: 1.5; font-size: 12.5px; color: #555; font-weight: 500; font-family: monospace">product cards</td>
        <td style="padding: 8px 14px; line-height: 1.5"></td>
        <td style="padding: 8px 14px; line-height: 1.5; background: #fce8e8"></td>
        <td style="padding: 8px 14px; line-height: 1.5"></td>
      </tr>

      <!-- Classic product cards -->
      <tr style="border-bottom: 0.5px solid #e5e5e5">
        <td style="padding: 8px 14px; line-height: 1.5"></td>
        <td style="padding: 8px 14px; line-height: 1.5"></td>
        <td style="padding: 8px 14px; line-height: 1.5">classic product cards</td>
        <td style="padding: 8px 14px; line-height: 1.5; background: #fce8e8">continue showing classic product cards</td>
        <td style="padding: 8px 14px; line-height: 1.5">uses modern product cards</td>
      </tr>

      <!-- ICONS section header -->
      <tr style="border-bottom: 0.5px solid #e5e5e5; background: #fafafa">
        <td colspan="5" style="padding: 8px 14px; font-size: 13px; font-weight: 700; line-height: 1.5">Icons</td>
      </tr>

      <!-- Shopping bag icon -->
      <tr style="border-bottom: 0.5px solid #e5e5e5">
        <td style="padding: 8px 14px; line-height: 1.5"></td>
        <td style="padding: 8px 14px; line-height: 1.5; font-size: 12.5px; color: #555; font-weight: 500; font-family: monospace">icons</td>
        <td style="padding: 8px 14px; line-height: 1.5">classic shopping bag icon</td>
        <td style="padding: 8px 14px; line-height: 1.5; background: #fce8e8">modern shopping bag icon</td>
        <td style="padding: 8px 14px; line-height: 1.5">modern shopping bag icon</td>
      </tr>

      <!-- Heart icon -->
      <tr style="border-bottom: 0.5px solid #e5e5e5">
        <td style="padding: 8px 14px; line-height: 1.5"></td>
        <td style="padding: 8px 14px; line-height: 1.5"></td>
        <td style="padding: 8px 14px; line-height: 1.5">classic heart icon</td>
        <td style="padding: 8px 14px; line-height: 1.5; background: #fce8e8">modern heart icon</td>
        <td style="padding: 8px 14px; line-height: 1.5">modern heart icon</td>
      </tr>

      <!-- VIDEO HEADERS section -->
      <tr>
        <td style="padding: 8px 14px; line-height: 1.5; font-size: 13px; font-weight: 700">Video Headers</td>
        <td style="padding: 8px 14px; line-height: 1.5">no video header changes at this time</td>
        <td style="padding: 8px 14px; line-height: 1.5">uses classic video header</td>
        <td style="padding: 8px 14px; line-height: 1.5; background: #fce8e8">continue using classic header</td>
        <td style="padding: 8px 14px; line-height: 1.5">uses modern header</td>
      </tr>
    </tbody>
  </table>
</div>