Links
Comment on page

Carousel / Grid

Embed feed - Carousel or Grid allows the content to be displayed as a row or grid of thumbnails. Embed feeds are usually used for content discovery where the user can see multiple content and increases the chance to initiate the content engagement.
Carousel
Grid

Integration

HTML
Wordpress Plugin
AMP
iframe
Place the javascript part either on the <head> or <body> or right above the Firework component you are adding.
<script async src="//asset.fwcdn3.com/js/embed-feed.js" type="text/javascript" ></script>
Place the web component where the feed should be displayed.
<fw-embed-feed
channel="your-channel"
mode="row"
></fw-embed-feed>
  1. 1.
    Visit https://wordpress.org/plugins/firework-videos/#installation or search for Firework Videos in your WordPress Admin plugins area.
  2. 2.
    Follow the instructions to install, activate and place the plugin's widget.
  3. 3.
    Connect your feed using provided app_id
Direct Javascript integration works for Wordpress as well. Use https://wordpress.org/plugins/ad-inserter/ to simplify copy&paste.
AMP HTML header part (avoid duplication with previously declared scripts)
<script async custom-element="amp-access" src="https://cdn.ampproject.org/v0/amp-access-0.1.js"></script>
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-latest.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
AMP HTML header part
<script id="amp-access" type="application/json">
[{
"noPingback": true,
"authorization": "https://fireworktv.com/embed/amp-access?&source_url=SOURCE_URL&ampdoc_url=AMPDOC_URL&canonical_url=CANONICAL_URL&document_referrer=DOCUMENT_REFERRER&reader_id=READER_ID&_=RANDOM",
"authorizationFallbackResponse": {
"access": false,
"error": true
},
"namespace": "fwn"
}]
</script>
AMP HTML body part. Search for {CHANNEL} and replace with your channel name. Other params can be serialized as iframe src querystring.
<!-- This part goes to body -->
<section amp-access="fwn.access">
<template amp-access-template type="amp-mustache">
<amp-iframe height="300" layout="fixed-height" resizable width="auto" sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-top-navigation allow-top-navigation-by-user-activation"
src="https://fw.tv/iframe/embed-feed?&channel={CHANNEL}&open_in=_blank&page_url={{fwn.source_url}}"
>
<div overflow>Loading videos...</div>
<div placeholder style="text-align:center;margin:50px 0;">
<amp-img layout="fixed" width="300" height="118" src="https://asset.fireworktv.com/images/amp/firework.png"></amp-img>
</div>
</amp-iframe>
</template>
</section>
Firework provides iframe integration with some limitations, like opening a video in new tab only. Any attributes needs to be provided as a querystring to the iframe src attribute. Read more about iframe limitations here.
<iframe
frameborder="0"
height="400"
width="100%"
sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-top-navigation allow-top-navigation-by-user-activation"
src="https://fw.tv/iframe/embed-feed?&channel={CHANNEL}&open_in=_blank&page_url={CURRENT_PAGE}"
></iframe>
Firework's iframe solution should be suitable for Facebook Instant Articles without any issues. Please follow the FB guidelines on how to include embeds. https://developers.facebook.com/docs/instant-articles/reference/embeds
In case your page uses multiple widget components, insert <script> tag with combined fwn.js file instead of requesting each js file individually. This would improve your performance.
Example:
<script async src="//asset.fwcdn3.com/js/fwn.js" type="text/javascript" ></script>

Attributes

In addition to the attributes described below, there are Player Attributes (which affects the way player behaves) and Feed Attributes (which decides the content being displayed) . You can find the list of attributes specific to Embed Feed in the section below
Name
Description
Default Value
mode
row | grid | pinned
One of three available display modes.
row
size
medium | large
Thumbnail size. Does not apply to grid mode
large
placement
top | middle | bottom Informal value about placement position.
open_in
Where to open video player on thumbnail click.
  • default - this option will allow us to pick most suitable way how to open player on page based on browser, device and others
  • _modal - popup-like modal (does not leave publisher site)
  • _self - current tab
  • _blank - new tab
default
max_videos
Max. number of videos loaded for grid mode. Zero 0 creates grid with infinite scroll.
paginate_by
Page size for manual pagination in grid mode. Reveals "Load More" button to load next page. Please notepaginate_by ** and ** max_videos are fuzzy numbers which do not allow any orphaned thumbnails to fall on next grid row.
autoplay
true | false
Autoplays first thumbnail.
true
captions
true | false
Show captions for autoplayed thumbnails
true
title
Specify title for grid mode. Defaults to localized "Stories and Short Videos"

Embed Feed Styling

CSS variables for embed feed can be declared in global scope or on specific <fw-embed-feed> component. You can declare in :root, head ,body or on specific <fw-embed-feed> component.
Variable
Description
--fw-thumbnail-border-radius
Border radius for feed thumbnails. Defaults to 10px.
--fw-thumbnail-width
Custom thumbnail width. Defaults to 240px.
--fw-thumbnail-height
Custom thumbnail height. Defaults to 400px.
--fw-thumbnail-gap
Gap between thumbnails. Defaults to 10px.
--fw-font-family
Customize font for video title to better match you site design.
--fw-ad-badge-background
Custom "Sponsored" badge background
--fw-ad-badge-font-color
Custom "Sponsored" badge font color

Applying CSS variables

There are multiple ways how to scope CSS variables in general.
Option 1: Target :root, html or body element to achieve broader scope:
<style>
:root {
--fw-player-background: rgba(255, 255, 255, 0.6);
--fw-player-border-radius: 0;
}
</style>
Option 2: Target specific element via CSS declaration or inline style for narrow scope:
<style>
fw-storyblock {
// `id` or `class` can be used as well.
--fw-storyblock-background: transparent;
}
</style>
<fw-storyblock
channel="awesome-channel"
playlist="kj43j2"
style="--fw-font-family: 'Roboto Slab', serif"
></fw-storyblock>
Styling fullscreen video element on a more broader scope (:root) might be necessary since many components do not render video within them, rather use <body> as a placement.

Examples

Remove border radius and change player backgorund to white:

<style>
:root {
--fw-player-background: rgba(255, 255, 255, 0.6);
--fw-player-border-radius: 0;
}
fw-embed-feed {
--fw-thumbnail-border-radius: 0;
}
</style>

Custom font family

<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab');
:root {
--fw-font-family: "Roboto Slab", serif;
}
</style>

Widget Styling Attributes

List of widget attributes which can be used to alter style or UI of Firework components.
Name
Description
Default
ui_font_css
Link to custom CSS file.
ui_primary_color
CSS color value of color accents.
ui_button_color
CSS color value of CTA button.
ui_button_font_color
CSS color value of CTA button text.
ui_border_style
Border radius style.
  • rounded radius ~14px
  • hard No radius
rounded
ui_share_sheet
Coma separated values of share sheet options.
facebook,twitter,whatsapp, sms,copy,native

Example

<fw-embed-feed
channel="awesome-channel"
playlist="kj43j2"
ui_border_style = "hard"
></fw-embed-feed>
Last modified 3mo ago