Learn how to generate an HTML tag to embed a playlist on your website.
When you are ready to add a playlist to your website, you’ll generate an HTML code tag that you can easily copy and paste. You identify where on your page you want the content to live, and then paste the code into the content block that you’ve selected.
To embed a playlist on your webpage:
- In the Business Portal, click into the playlist you would like to add.
- Click on the "Add to Site" button next to the selected playlist.
- Select your playlist layout. There are Nine different playlist layouts for you to choose from.
- Click the Copy Code button.
- Embed the HTML code on the webpage by pasting it.
- You can also preview the chosen layout in the Preview section before embedding it on your webpage.
9 Layout Choices
Story Blocks, Grids, and Carousels are designed to be plugged into the body of your website. They are a static part of the page and can be scrolled past by the visitor. You can learn more about customizing a Story Block here.
Grids and Carousels can continue to be played in Picture-In-Picture mode while the user continues browsing your webpage(s).
The Floating Player is usually plugged into the header or the body of your website. It floats on top of other content and continues playing in the corner of the screen scrolls with the visitor.
Story Block: This is a static content block. It will display one video on just a portion of your webpage and can be scrolled past. When one video is complete, the next video in the playlist will play. Customize the background to transparent by adding an additional line of code.
Floating Player: This is a small video screen that is located at the bottom-right corner of the page and will float with the page as the user scrolls. Clicking elsewhere on the webpage will return the playlist videos into a Picture-In-Picture view.
Grid: Click on a video to enlarge the player and allow the user to scroll left or right through the videos in the playlist. When minimized, the video player will float in the corner of the screen. You can select which corner you want the video to float in.
Carousel: Fixed videos scroll left-to-right. Selecting a video will enlarge the video player. When minimized, the video player will float to a corner of the screen. You can select which corner you want the video to float in.
Small Sized and Medium Sized Carousel : You can adjust the size of the carousel to either small or medium by incorporating the size="small" for a small carousel or size="medium" for a medium carousel directly into the HTML code.
<script async type="text/javascript" src="//asset.fwcdn3.com/js/embed-feed.js"></script>
<fw-embed-feed
channel="firework_depot"
playlist="oe8bX5"
mode="row"
open_in="default"
max_videos="0"
placement="middle"
size ="small"
player_placement="bottom-right"
></fw-embed-feed>
Enlarged CTA: If leveraging our Carousal or Grid layout option with a Button interaction, this will display over the video poster during auto play.
Hero Unit: The Hero Unit is a full-screen view that features a Story Block on the left side of the screen and interactive text, including Call to Actions, on the right. See Enable a Hero Unit to learn more about this livestream specific layout.
Player Deck : This aims to enhance the conversion rate by prominently displaying all available videos and efficiently directing shoppers to Product Detail Pages (PDP) as swiftly as possible.
Horizontal Player : Enable horizontal displays. Allow 1 video in horizontal video Player as a hero unit or full width video
Horizontal Carousel - This layout displays several horizontal videos arranged side by side for easy viewing.
Dynamic Carousel : Introducing an innovative approach to presenting a carousel playlist, this layout enables the display of cards that can be interacted with. Each video is showcased as a static poster, providing clickable options for users to explore further.
