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
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.Visit https://wordpress.org/plugins/firework-videos/#installation or search for
Firework Videosin your WordPress Admin plugins area. - 2.Follow the instructions to install, activate and place the plugin's widget.
- 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&doc_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>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 | pinnedOne of three available display modes. | row |
size | medium | largeThumbnail 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 |
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 | falseAutoplays first thumbnail. | true |
captions | true | falseShow captions for autoplayed thumbnails | true |
title | Specify title for grid mode. Defaults to localized "Stories and Short Videos" | |
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 |
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.
<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>
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab');
:root {
--fw-font-family: "Roboto Slab", serif;
}
</style>
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 |
ui_share_sheet | Coma separated values of share sheet options. | facebook,twitter,whatsapp,
sms,copy,native |
<fw-embed-feed
channel="awesome-channel"
playlist="kj43j2"
ui_border_style = "hard"
></fw-embed-feed>
Last modified 1mo ago