Storyblock (Web)

Storyblock is used when you want to integrate the video player directly on to your website.

Integration

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&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="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>

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 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 player

fullscreen 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

player_captions

Disable the title of the video appearing on the player

true

PreviousCarousel / Grid NextPlayer (Floating)

Last updated 4 months ago

Integration

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&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="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
  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>

Attributes

Player Attributes

Feed Attributes

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 player

fullscreen 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

player_captions

Disable the title of the video appearing on the player

true