{
  "video": {
    "title": "Video",
    "status": {
      "ready": true
    },
    "introduction": "<p>Provides a custom-styled video playback of a YouTube video embed, removing as much default YouTube player styling as possible.</p>",
    "examples": [
      {
        "description": "Video",
        "template": "video",
        "template-data": {}
      }
    ],
    "dependencies": [
      "src/styles/base/*.scss",
      "src/styles/components/blocks/_video.scss",
      "src/scripts/modules/jquery.pfVideo.js"
    ],
    "usages": {
      "body": [
        [
          "<code>.video</code>",
          "Placed on the outermost tag that will contain the video component.",
          "Required"
        ],
        [
          "<code>[data-js=video]</code>",
          "Placed on the outermost tag that will contain the video component.",
          "Required"
        ],
        [
          "<code>[data-video-id=YTVideoID]</code>",
          "Placed on the <code>[data-js=video]</code> to define the YouTube ID of the video in the html.",
          "Required"
        ],
        [
          "<code>.video--16-9</code>",
          "Sets the aspect ratio of the video component to be 16:9.",
          "Optional"
        ],
        [
          "<code>.video__preview</code>",
          "Placed on the tag that wraps the <code>img</code> element used as for the video preview (when video is not playing).",
          "Required"
        ],
        [
          "<code>.video__heading</code>",
          "Placed on the tag that will contain a heading for the video. The heading should be placed inside the <code>video__preview</code>.",
          "Optional"
        ],
        [
          "<code>#[YTVideoID]</code>",
          "Placed on the tag will be replaced by the video iFrame embed. YouTube requires an id, so this will be the same as the YouTube ID you used on the <code>data-video-id</code> attribute.",
          "Required"
        ],
        [
          "<code>.video__play</code>",
          "Placed on the tag that represents the custom play button.",
          "Required"
        ],
        [
          "<code>[data-js=video-play]</code>",
          "Placed on the tag that represents the custom play button.",
          "Required"
        ]
      ]
    }
  }
}