@times-stories/background-container

@times-stories/background-container

The background container for the @times-stories suite of packages

Installation

$ yarn add @times-stories/background-container

Usage

The background-container duplicates functionality from image-container. For information on image placement and transition logic see @times-stories/image-container.

It is also possible to display a background Brightcove video.

import Story from "@times-stories/story";
import Page from "@times-stories/page";
import BackgroundContainer from "@times-stories/background-container";

export default () => (
  <Story>
    <Page>
      {props => (
        <BackgroundContainer
          {...props}
          backgroundImage={{
            src: backgroundImage,
            focusPoint: {
              x: 50,
              y: 50
            }
          }},
        />
      )}
    </Page>
  </Story>
);

export const withVideo = () => (
  <Story>
    <Page>
      {props => (
        <BackgroundContainer
          {...props}
          backgroundVideo: {
            accountId: "5436121856001",
            playerId: "H1xC44NNKb",
            videoId: "6010720526001",
          },
        />
      )}
    </Page>
  </Story>
);