{"id":21319538,"url":"https://github.com/simplajs/simpla-video","last_synced_at":"2025-12-12T04:35:08.286Z","repository":{"id":58231404,"uuid":"89513606","full_name":"simplajs/simpla-video","owner":"simplajs","description":"Editable, responsive video embeds from Youtube and Vimeo","archived":false,"fork":false,"pushed_at":"2017-12-15T05:54:33.000Z","size":113,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-11-10T19:15:32.890Z","etag":null,"topics":["content-management","custom-element","editable","simpla","video","web-component"],"latest_commit_sha":null,"homepage":"https://www.simplajs.org","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/simplajs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-04-26T18:26:15.000Z","updated_at":"2019-09-27T19:36:24.000Z","dependencies_parsed_at":"2022-08-31T00:22:14.828Z","dependency_job_id":null,"html_url":"https://github.com/simplajs/simpla-video","commit_stats":null,"previous_names":["simplaelements/simpla-video"],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simplajs%2Fsimpla-video","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simplajs%2Fsimpla-video/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simplajs%2Fsimpla-video/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simplajs%2Fsimpla-video/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/simplajs","download_url":"https://codeload.github.com/simplajs/simpla-video/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225795416,"owners_count":17525316,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["content-management","custom-element","editable","simpla","video","web-component"],"created_at":"2024-11-21T19:42:44.032Z","updated_at":"2025-12-12T04:35:03.241Z","avatar_url":"https://github.com/simplajs.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Simpla Video\n[![Build status][travis-badge]][travis-url] ![Size][size-badge] ![Version][bower-badge] [![Published][webcomponents-badge]][webcomponents-url]\n\nSimpla-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.\n\n\u003c!---\n```\n\u003ccustom-element-demo\u003e\n  \u003ctemplate\u003e\n    \u003cscript src=\"../webcomponentsjs/webcomponents-lite.js\"\u003e\u003c/script\u003e\n    \u003clink rel=\"import\" href=\"simpla-video.html\"\u003e\n\n    \u003cscript src=\"https://unpkg.com/simpla@2.0.0\"\u003e\u003c/script\u003e\n    \u003cscript\u003e\n      Simpla.init('local');\n      Simpla.editable(true);\n    \u003c/script\u003e\n\n    \u003cstyle\u003e\n      simpla-video {\n        max-width: 38rem;\n        margin: 0 auto\n      }\n    \u003c/style\u003e\n    \u003cnext-code-block\u003e\u003c/next-code-block\u003e\n  \u003c/template\u003e\n\u003c/custom-element-demo\u003e\n```\n--\u003e\n```html\n\u003csimpla-video path=\"/video\"\u003e\u003c/simpla-video\u003e\n```\n\n### Contents\n\n- [Installation and setup](#installation-and-setup)\n- [Editing content](#editing-content)\n- [Saving content](#saving-content)\n- [Responsive videos](#responsive-videos)\n- [Deferred loading](#deferred-loading)\n- [Initializing with static content](#initializing-with-static-content)\n- [Custom placeholders](#custom-placeholders)\n- [Readonly](#readonly)\n- [Contributing](#contributing)\n\n### Resources\n\n- [API reference][api]\n- [Demo][demo]\n- [License][license]\n\n## Installation and setup\n\nInstall simpla-video with Bower (Yarn support coming soon)\n\n```sh\n$ bower i simpla-video --save\n```\n\n[Setup Simpla][simpla-setup] on your page, then import simpla-video into your `\u003chead\u003e`\n\n```html\n\u003clink rel=\"import\" href=\"/bower_components/simpla-video/simpla-video.html\"\u003e\n```\n\nUse `\u003csimpla-video\u003e` wherever you want to embed a video. Give each video a unique `path`, where it will store its content in your project\n\n```html\n\u003csimpla-video path=\"/video\"\u003e\u003c/simpla-video\u003e\n```\n\n## Editing content\n\nEdit 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.\n\n```js\n// Enter edit mode\nSimpla.editable(true);\n```\n\n```html\n\u003c!-- Make only this video editable --\u003e\n\u003csimpla-video path=\"/video\" editable\u003e\u003c/simpla-video\u003e\n```\n\nEntering 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.\n\n## Saving content\n\nSave a simpla-video by calling Simpla's `save()` method, which will save all modified content on the page. It returns a promise.\n\n```js\n// Save all modified Simpla content\nSimpla.save();\n```\n\n\u003e You must be authenticated with Simpla before saving content\n\n## Responsive videos\n\nSimpla-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.\n\n## Deferred loading\n\nDefer the loading of a video until the user clicks on it with the `defer` property\n\n```html\n\u003csimpla-video path=\"/video\" defer\u003e\u003c/simpla-video\u003e\n```\n\nIf 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.\n\n## Initializing with static content\n\nYou 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\n\n```html\n\u003csimpla-video src=\"https://vimeo.com/55073825\" path=\"/video\"\u003e\n```\n\nInitializing 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.\n\n\u003e 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 \n\n## Custom placeholders\n\nYou can set custom placeholders (displayed when simpla-video is editable and does not have a video src set) with a `placeholder` attribute\n\n```html\n\u003csimpla-video path=\"/video\" placeholder=\"url(https://i.vimeocdn.com/video/499134794_1280x720.jpg)\"\u003e\n```\n\n`placeholder` takes any valid CSS `background` value (colors, `url()`, etc). The placeholder does not impact the video's default size or aspect ratio.\n\n## Readonly\n\nSimpla-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.\n\n```html\n\u003csimpla-video path=\"/video\" readonly\u003e\n```\n\n## Contributing\n\nIf 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. \n\n***\n\nMIT © [Simpla][simpla]\n\n[simpla]: https://www.simpla.io\n[simpla-setup]: https://docs.simpla.io/guides/get-started.html\n\n[api]: https://www.webcomponents.org/element/simplaio/simpla-videw/page/API.md\n[demo]: https://www.webcomponents.org/element/simplaio/simpla-video/demo/demo/index.html\n[license]: https://github.com/simplaio/simpla-video/blob/master/LICENSE\n\n[bower-badge]: https://img.shields.io/bower/v/simpla-video.svg\n[travis-badge]: https://img.shields.io/travis/simplaio/simpla-video.svg\n[travis-url]: https://travis-ci.org/simplaio/simpla-video\n[size-badge]: http://img.badgesize.io/simplaio/simpla-video/master/simpla-video.html?compression=gzip\u0026label=render_bundle_%28gzip%29\n[webcomponents-badge]: https://img.shields.io/badge/webcomponents.org-published-blue.svg\n[webcomponents-url]: https://www.webcomponents.org/element/simplaio/simpla-video\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimplajs%2Fsimpla-video","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsimplajs%2Fsimpla-video","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimplajs%2Fsimpla-video/lists"}