https://github.com/simplajs/simpla-video
Editable, responsive video embeds from Youtube and Vimeo
https://github.com/simplajs/simpla-video
content-management custom-element editable simpla video web-component
Last synced: 3 months ago
JSON representation
Editable, responsive video embeds from Youtube and Vimeo
- Host: GitHub
- URL: https://github.com/simplajs/simpla-video
- Owner: simplajs
- License: mit
- Created: 2017-04-26T18:26:15.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-12-15T05:54:33.000Z (almost 8 years ago)
- Last Synced: 2024-11-10T19:15:32.890Z (11 months ago)
- Topics: content-management, custom-element, editable, simpla, video, web-component
- Language: HTML
- Homepage: https://www.simplajs.org
- Size: 110 KB
- Stars: 6
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Simpla Video
[![Build status][travis-badge]][travis-url] ![Size][size-badge] ![Version][bower-badge] [![Published][webcomponents-badge]][webcomponents-url]
Simpla-video is an editable video element. It lets you directly embed responsive videos from services like Youtube and Vimeo on your page, and defer loading them until user interaction. It's built on the [Simpla][simpla] content system.
```html
```
### Contents
- [Installation and setup](#installation-and-setup)
- [Editing content](#editing-content)
- [Saving content](#saving-content)
- [Responsive videos](#responsive-videos)
- [Deferred loading](#deferred-loading)
- [Initializing with static content](#initializing-with-static-content)
- [Custom placeholders](#custom-placeholders)
- [Readonly](#readonly)
- [Contributing](#contributing)
### Resources
- [API reference][api]
- [Demo][demo]
- [License][license]
## Installation and setup
Install simpla-video with Bower (Yarn support coming soon)
```sh
$ bower i simpla-video --save
```
[Setup Simpla][simpla-setup] on your page, then import simpla-video into your ``
```html
```
Use `` wherever you want to embed a video. Give each video a unique `path`, where it will store its content in your project
```html
```
## Editing content
Edit a simpla-video by entering edit mode with Simpla (which makes all Simpla elements on a page editable) or setting the `editable` property directly on the element.
```js
// Enter edit mode
Simpla.editable(true);
```
```html
```
Entering edit mode with Simpla is the recommended way to edit video embeds. It ensures all elements on a page remain in sync and updates Simpla's public `editable` state, which other elements may rely on.
## Saving content
Save a simpla-video by calling Simpla's `save()` method, which will save all modified content on the page. It returns a promise.
```js
// Save all modified Simpla content
Simpla.save();
```
> You must be authenticated with Simpla before saving content
## Responsive videos
Simpla-video is fully responsive, you can give it any valid CSS `width` (including percentages) and it will behave as expected. **However** sizing by `height` is currently not supported.
## Deferred loading
Defer the loading of a video until the user clicks on it with the `defer` property
```html
```
If a simpla-video has `defer` set, it will display a full-size thumbnail of the embedded video rather than the video itself. Then when a user clicks on the thumbnail the video will be loaded in dynamically.
## Initializing with static content
You can set the `src` of simpla-video directly, using a URL from either Vimeo or Youtube. If data for the video's `path` exists on Simpla's API, the locally set `src` will be overwritten
```html
```
Initializing with static content is useful for bootstrapping a project with predefined content. By setting `src` and then calling `Simpla.save()` you can easily set content directly to Simpla.
> Since static content is overwritten by remote data, you should not have `src` set in production. If a newer video gets saved you will experience FOUC (Flash Of Unformatted Content) when the old one is overwritten
## Custom placeholders
You can set custom placeholders (displayed when simpla-video is editable and does not have a video src set) with a `placeholder` attribute
```html
```
`placeholder` takes any valid CSS `background` value (colors, `url()`, etc). The placeholder does not impact the video's default size or aspect ratio.
## Readonly
Simpla-video has a `readonly` property that stops it from becoming editable, even if Simpla is in edit mode or you try to set `editable` on the element directly. This is useful for using simpla-video to purely consume and display content from Simpla's API.
```html
```
## Contributing
If you find any issues with simpla-video please report them! If you'd like to see a new feature in supported file an issue. We also happily accept PRs.
***
MIT © [Simpla][simpla]
[simpla]: https://www.simpla.io
[simpla-setup]: https://docs.simpla.io/guides/get-started.html
[api]: https://www.webcomponents.org/element/simplaio/simpla-videw/page/API.md
[demo]: https://www.webcomponents.org/element/simplaio/simpla-video/demo/demo/index.html
[license]: https://github.com/simplaio/simpla-video/blob/master/LICENSE
[bower-badge]: https://img.shields.io/bower/v/simpla-video.svg
[travis-badge]: https://img.shields.io/travis/simplaio/simpla-video.svg
[travis-url]: https://travis-ci.org/simplaio/simpla-video
[size-badge]: http://img.badgesize.io/simplaio/simpla-video/master/simpla-video.html?compression=gzip&label=render_bundle_%28gzip%29
[webcomponents-badge]: https://img.shields.io/badge/webcomponents.org-published-blue.svg
[webcomponents-url]: https://www.webcomponents.org/element/simplaio/simpla-video