1. Help Center
  2. Get Started with Firework
  3. Upload Short Videos into Firework and Embed

Upload a Horizontal Short Video

Learn how to display and embed horizontal videos.

How to Upload a Horizontal Video

  1. From the business portal, upload your new horizontal video. We support videos that are 16:9 in size. 
  2. Add your interaction, then assign to a playlist

Note: Currently in the business portal the poster will appear vertically, but we will plan to roll out a horizontal poster soon!

How to Embed a Horizontal Video

We will share two methods for displaying horizontal videos on your website.

Single Video Embed - Hero Image

You may display a single video across the page. This works best for the top of the homepage for the hero video.

  1. First, navigate to a single video.

  2. Click the embed icon, then embed to web and copy the code.
  3. Then navigate to the page you wish to embed this on, paste in the script. Under </script>, replace with the following, including your Channel and Playlist ID:

<script async src='https://asset.fwcdn3.com/js/fwn.js'></script>'

<fw-player style="width:100%; aspect-ratio: 16 / 9" channel="firework_depot" video="oBlDRL" max_videos="1" player_minimize="false" autoplay="true" branding="false" player_captions="false"></fw-player>

<script async src='https://asset.fwcdn3.com/js/fwn.js'></script>'

<fw-player style="width:100%; aspect-ratio: 16 / 9" 
channel="firework_depot" 
video="oBlDRL" 
max_videos="1" 
player_minimize="false" autoplay="true" 
branding="false" 
player_captions="false"></fw-player>

We recommend keeping the aspect ratio set to 16/9. You may adjust the width to be as small or large across the row. 

If leveraging Shopify, insert a custom liquid to then place the following script above. 

Display Multiple Videos in a Carousel

You may display multiple videos side by side using our Carousel embed. 

  1. Add your horizontal videos to a Playlist.
  2. Click Add to Site, then choose Carousel. Click Copy code.
  3. Then navigate to the page you wish to embed this on, paste in the script. Under </script>, replace with the following, including your Channel and Playlist ID:
<script async src='//asset.fwcdn3.com/js/fwn.js'></script>

<fw-embed-feed style="--fw-thumbnail-aspect-ratio: 16/9; 
--fw-thumbnail-width: auto; --fw-thumbnail-height: 240px; 
--fw-thumbnail-gap: 40px"
channel="firework_depot"
playlist="5aZ0jo"
player_minimize="false"
></fw-embed-feed>

We recommend keeping the aspect ratio set to 16/9. You may adjust the width, height, or gap to be as small or large across the row. 

If leveraging Shopify, insert a custom liquid to then place the following script above.

Note: if using a floating player, then this will display horizontally.