https://github.com/floedelmann/embetty-vue

Embetty displays remote content like tweets or YouTube videos without compromising your privacy.
https://github.com/floedelmann/embetty-vue

embetty hacktoberfest privacy tweets twitter video vimeo vimeo-player vue vuejs youtube youtube-player

Last synced: 3 days ago
JSON representation

Embetty displays remote content like tweets or YouTube videos without compromising your privacy.

• Host: GitHub
• URL: https://github.com/floedelmann/embetty-vue
• Owner: FloEdelmann
• Created: 2018-07-30T21:58:06.000Z (about 6 years ago)
• Default Branch: main
• Last Pushed: 2024-06-03T07:30:52.000Z (4 months ago)
• Last Synced: 2024-06-11T18:59:49.710Z (4 months ago)
• Topics: embetty, hacktoberfest, privacy, tweets, twitter, video, vimeo, vimeo-player, vue, vuejs, youtube, youtube-player
• Language: Vue
• Homepage:
• Size: 1.46 MB
• Stars: 9
• Watchers: 4
• Forks: 5
• Open Issues: 12
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# embetty-vue [![npm](https://img.shields.io/npm/v/embetty-vue.svg)](https://www.npmjs.com/package/embetty-vue)

Embetty displays remote content like tweets or videos without compromising your privacy.

This is a Vue.js alternative to the original [embetty](https://github.com/heiseonline/embetty) implementation (which is based on Web Components). To use it, you need to have a [embetty server](https://github.com/heiseonline/embetty-server) up and running.

## Usage

### Setup when using a bundler (webpack, rollup, etc.)

```js

import Vue from 'vue';

import EmbettyVue from 'embetty-vue';

const Vue = require('vue');

const { EmbettyVue } = require('embetty-vue');

Vue.use(EmbettyVue, {

  // optional, but recommended

  serverUrl: '/path/to/embetty-server', // without trailing slash

  // optional

  posterImageMode: 'cover' // or 'contain'

});

```

The CSS can be imported from `embetty-vue/dist/embetty-vue.css`.

### Setup when directly linking the files

In your HTML head:

```html

 

```

You can link to the files without `.min` for debugging.

### Using the components

```html

```

If you didn't specify the server URL globally (either the options passed to `Vue.use` or the `` tag), you must specify it on every component:

```html

```

See [`src/App.vue`](src/App.vue) for a lot of examples and component options.

## Differences to original implementation

*embetty-vue*'s `` component supports type `native`: Provide an URL to a video file as `video-id` to load it on click in a `` HTML element.

## Development

### Project setup

```

npm install

```

### Compiles and hot-reloads for development

```

npm run watch

```

### Compiles and minifies for production

```

npm run build

```