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.
Looking to embed videos using Shopify? Please visit the instructions here.
Looking to embed dynamically to a product page? See here.
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 five 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.
5 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 attribute size="small" for a small carousel or attribute 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"
attribute 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.
