Storyblock
Storyblock is used when you want to integrate the video player directly on to your website.
Storyblock
HTML
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/storyblock.js" type="text/javascript"></script>
Place the web component where the Storyblock should be displayed.
<fw-storyblock
channel="firework"
></fw-storyblock>
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="600" 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>
IFrame integrations are based on Firework hosted code snippets. Querystring of
src attribute should be used to pass any additional attributes. Please note page_url is also used as a primary url for sharing. Read more about iframe limitations here.<iframe
allow="autoplay; web-share;"
style="background: transparent; border: none; height: 50vh"
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/storyblock?amp=1&channel={CHANNEL}&page_url={CURRENT_URL}"
></iframe>
IFrame integration can be used for Facebook Instant Article as well. 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 Storyblock in the section below
Name | Description | Default value |
|---|---|---|
max_videos | number of videos showed in storyblock | Infinity |
loop | loop feed of videos | false |
dock | dock to minimized player when scrolled out of viewport | false |
mode | pinned for initialized as minimized playerfullscreen for player in fullscreen mode | ✕ |
page_url | page url of widget, this configuration is considered only if widget is used inside iframe | URL of opened page |
height | height of Storyblock widget, if not used Storyblock will use 100% of parent container, but maximally 75% of visible height | 75vh - 75% of visible height |
CSS variables for embed feed can be declared in global scope or on specific
<fw-storyblock> component. You can declare in :root, head ,body or on specific <fw-storyblock> component.Variable | Description |
--fw-storyblock-background | CSS string to specify storyblock background in case its visible. Defaults to black. |
--fw-storyblock-border-radius | CSS string to specify storyblock border radius. Defaults to 10px. |
CSS variables for video player needs to be declared in global scope.
:root, head or body is ok. Values applied to all Video Player instances and Storyblocks.Variable | Description |
--fw-player-background | Video Player background color (backdrop, tiles, ...). Defaults to semi-transparent black. |
--fw-player-chat-background | Background color of chat section in fullscreen player. |
--fw-player-shop-background | Background color of commerce section in fullscreen player. |
--fw-player-border-radius | Video Player border radiuses. Defaults to 14px. |
--fw-player-inset | Video Player inset CSS string used when minimized. Defaults to auto 0 0 auto for bottom right corner. |
--fw-player-height | Video Player height as a CSS string. Defaults to 320px or 192px for small screens. |
--fw-player-width | Video Player width as a CSS string. Defaults to 180px or 108px for small screens. |
--fw-player-margin | Video Player margin from the edge of screen. Defaults to 16px or 8px for small screens. |
--fw-font-family | Customize font for video player UI |
--fw-player-header-font-family--fw-player-chat-font-family--fw-product-name-font-family--fw-product-price-font-family--fw-product-description-font-family | More granular font settings for header, chat and product. |
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-storyblock
channel="awesome-channel"
playlist="kj43j2"
ui_primary_color="rgb(255, 0, 0);"
></fw-storyblock>
Last modified 1mo ago