Matestack Ui Core
AboutMatestack Ui CoreMatestack Ui VueJsMatestack Ui Bootstrap
1.5
1.5
  • Welcome
  • Getting started
    • Installation & Update
    • Concepts & Rails Integration
    • Quick Start
    • Support & Feedback [WIP]
    • Common Issues [WIP]
  • UI Components
    • Component Overview
    • Rails Integration
    • Component Registry
    • General Component API
    • Haml Components
    • Reusing Views or Partials
    • Testing [WIP]
  • Reactivity
    • Reactivity Overview
    • Rails Integration
    • Actions
    • Forms
    • Async
    • Cable
    • Isolated
    • Collection
    • Custom Vue.js Components
    • Vue.js Event Hub
    • Vuex [WIP]
  • SPA-like Apps
    • SPA Overview
    • Rails Integration
    • App API
    • Page API
    • Transitions
    • Authorization
    • Tutorial
      • Creating a SPA-like App with Matestack
      • Essential Guide 1: Setup
      • Essential Guide 2: ActiveRecord & Database
      • Essential Guide 3: Person Index, Show, Transition
      • Essential Guide 4: Forms & Actions (Create, Update, Delete)
      • Essential Guide 5: Toggle Component
      • Essential Guide 6: Async Component
      • Essential Guide 7: Partials and custom components
      • Essential Guide 8: Collection and async component
      • Essential Guide 9: Custom Vue.js components
      • Essential Guide 10: Styling and Notifications
      • Essential Guide 11: Authentication
      • Essential Guide 12: Heroku Deployment with Postgres
      • Essential Guide 13: Wrap Up & Outlook
  • Components API
    • Core Components
      • Abbr
      • Address
      • Area
      • Article
      • Aside
      • B
      • Bdi
      • Bdo
      • Blockquote
      • Button
      • Br
      • Caption
      • Cite
      • Code
      • Data
      • Datalist
      • Dd
      • Del
      • Details
      • Dfn
      • Dialog
      • Div
      • Dl
      • Dt
      • Em
      • Fieldset
      • Figure
      • Footer
      • Hr
      • Icon
      • Iframe
      • Img
      • Ins
      • Input
      • Header
      • Heading
      • Kbd
      • Label
      • Legend
      • Link
      • Lists
      • Main
      • Mark
      • Map
      • Meter
      • Nav
      • Noscript
      • Object
      • Option
      • Optgroup
      • Output
      • Paragraph
      • Param
      • Picture
      • Pg
      • Plain
      • Pre
      • Progress
      • S
      • Samp
      • Section
      • Select
      • Small
      • Span
      • Sup
      • Sub
      • Strong
      • Table
      • Template
      • Textarea
      • U
      • Unescaped
      • Q
      • Rails View
      • Rp
      • Rt
      • Ruby
      • Var
      • Video
      • Wbr
      • Youtube
    • Reactive Core Components
      • Action
      • Async
      • Cable
      • Collection
      • Form
      • Form Input
      • Form Checkbox
      • Form Radio
      • Form Select
      • Form Submit
      • Form Textarea
      • Onclick
      • Transition
      • Toggle
  • Integrations
    • Action Cable
    • Devise
    • CSS Frameworks [WIP]
    • Third Party JavaScript [WIP]
    • Third Party Ruby Gems [WIP]
  • Matestack Addons
    • Create your own Addon [WIP]
  • Community
    • Discord
    • Contribute
  • About
    • Core Team [WIP]
    • Sponsoring [WIP]
    • Legal Details [WIP]
Powered by GitBook
On this page
  • Parameters
  • Examples
  • Example 1: Basic usage

Was this helpful?

Edit on GitHub
  1. Components API
  2. Core Components

Video

The HTML video tag, implemented in Ruby.

Parameters

The video component takes mandatory path and type arguments and can take a number of optional configuration params.

autoplay (optional)

Expects a boolean and specifies whether the video should start playing as soon as it is ready.

controls (optional)

Expects a boolean and specifies whether the video controls (play/pause button etc) should be displayed.

height (optional)

Expects an integer with the height of the video in px.

loop (optional)

Expects a boolean and specifies whether the video will start over again every time it is finished.

muted (optional)

Expects a boolean and specifies whether the audio output of the video should be muted.

path

Expects a string with the source to the video. It looks for the video in the assets/videos folder and uses the standard Rails asset pipeline.

type

Expects a string with the type to the video.

playsinline (optional)

Expects a boolean and specifies whether the video should be played inline on iOS Safari.

preload (optional)

Expects a string (auto, metadata or none) and specifies whether the whole video/only metadata/nothing should be loaded on pageload. Default (if not specified) depends on the client's browser.

width (optional)

Expects an integer with the width of the video in px.

Examples

Example 1: Basic usage

video path: 'corgi.mp4', type: "mp4", width: 500, height: 300

returns

<video height='300' width='500'>
  <source src='/assets/corgi-[...].mp4' type='video/mp4'>
  Your browser does not support the video tag.
</video>
PreviousVarNextWbr

Last updated 3 years ago

Was this helpful?