{
  "name": "ds-video",
  "description": "Video player component",
  "docUrl": "https://design.soracom.io/design-system/elements/video/",
  "category": "elements",
  "htmlElements": [
    "video",
    "div"
  ],
  "isWebComponent": false,
  "modifiers": {
    "state": {
      "support": "custom",
      "values": [
        "--playing"
      ]
    },
    "layout": {
      "support": "subset",
      "values": [
        "--full-width"
      ]
    }
  },
  "examples": [
    {
      "name": "basic",
      "html": "<div class=\"ds-video\"><video controls src=\"video.mp4\" type=\"video/mp4\"></video></div>"
    },
    {
      "name": "direct",
      "html": "<video class=\"ds-video\" controls src=\"video.mp4\" type=\"video/mp4\"></video>"
    },
    {
      "name": "full-width",
      "html": "<div class=\"ds-video --full-width\"><video controls src=\"video.mp4\" type=\"video/mp4\"></video></div>"
    },
    {
      "name": "with-playpause",
      "html": "<div class=\"ds-video\"><button class=\"ds-icon --icon-circle-play-solid --xxlarge __playpause\"><span>Play</span></button><video src=\"video.mp4\" type=\"video/mp4\"></video></div>"
    },
    {
      "name": "with-controls",
      "html": "<div class=\"ds-video\"><div class=\"ds-switch --hide-label --bottom-right __controls\"><label class=\"--icon-minimize\"><input type=\"radio\" name=\"video-mode\" value=\"small\" checked><span>Small</span></label><label class=\"--icon-grid-row\"><input type=\"radio\" name=\"video-mode\" value=\"wide\"><span>Wide</span></label><label class=\"--icon-padding\"><input type=\"radio\" name=\"video-mode\" value=\"fullscreen\"><span>Fullscreen</span></label><label class=\"--icon-iframe\"><input type=\"radio\" name=\"video-mode\" value=\"pip\"><span>Picture in Picture</span></label></div><video controls src=\"video.mp4\" type=\"video/mp4\"></video></div>"
    },
    {
      "name": "playing",
      "html": "<div class=\"ds-video --playing\"><button class=\"ds-icon --icon-circle-play-solid --xxlarge __playpause\"><span>Pause</span></button><video src=\"video.mp4\" type=\"video/mp4\"></video></div>"
    }
  ]
}