Video
Displays a simple video player.
Video
<!-- video.blade.php -->
<video class="c-video" width="600" height="300" controls data-uid="69080f32b28c0">
<source class="c-video__source" src="https://storage.googleapis.com/coverr-main/mp4/Self-Serve-in-Arizona.mp4" type="video/mp4">
<br />
<b>Warning</b>: The parameter <b>"isWarning"</b> is not recognized in the component <b>"notice"</b> in <b>/var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Register.php</b> on line <b>253</b><br />
<!-- notice.blade.php -->
<div class="c-notice c-notice--info" id="id_69080f32b2988" data-uid="69080f32b299a" aria-labelledby="notice__text__id_69080f32b2988">
<span id="notice__text__id_69080f32b2988" data-js-notice-message="true" class="c-notice__message">
This component is not supported by your browser.
</span>
</div>
</video>
@video([
'formats' => [
['src' => "https://storage.googleapis.com/coverr-main/mp4/Self-Serve-in-Arizona.mp4", 'type' => "mp4"],
]
])
@endvideo
Blade component parameters
| Key | Default value | Type | Available values | Description |
| hasControls | true | boolean | - | Adds UI controls for play and pause |
| isMuted | false | boolean | - | If there should be audio enabled |
| shouldAutoplay | false | boolean | - | If the video should start automatically (requires isMuted) |
| errorMessage | This component is not supported by your browser. | string | - | A message to display when video is not supported. |
| formats | [] | array | - | Array of formats |
| height | 300 | integer | - | Initial height of video |
| width | 600 | integer | - | Initial width of video |
| subtitles | false | boolean | - | Array of subtitles for video |
| id | string | - | The DOM id of the component. | |
| classList | [] | array | - | Array containing wrapping classes array |
| attributeList | [] | array | - | Array containing keys and values rendered as attributes |
| containerAware | false | boolean | true/false | Makes the component container aware. Appends modifiers --size--xs/sm/md/lg to the component. |