Learn how to display and embed horizontal videos.
How to Upload a Horizontal Video
- From the business portal, upload your new horizontal video. We support videos that are 16:9 in size.
- 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.
- Start by selecting a single video to add to your playlist. Click on the "Add to site" button and then copy the code .
- 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-player style="width:100%; aspect-ratio: 16 / 9"
channel="firework_depot"
playlist="5Dem7o"
max_videos="1"
autoplay="true"
branding="false"
player_captions="false"
></fw-player>
To avoid having the floating player embed show when the user minimizes it, add
player_minimize="false"
We suggest including a single video in a playlist to achieve a banner video effect.
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.
- Add your horizontal videos to a Playlist.
Click Add to Site, then choose Carousel. Click Copy code. - 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"
></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.