embedia-vue
Version:
A vue component package to embed videos such as Facebook, Instagram, TikTok, YouTube/Shorts, Twitter/X, Vimeo, and Dailymotion.
273 lines (184 loc) • 5.86 kB
Markdown
<p align="center">
<img src="https://raw.githubusercontent.com/demjhonsilver/embedia-vue/main/img/logo.png" alt="Logo" width="70" height="70"/>
</p>
<div align="center">
# Embedia Vue
[](https://www.npmjs.com/package/embedia-vue)
[](https://github.com/demjhonsilver/embedia-vue/blob/main/LICENSE.md)
</div>
---------------------
## Table of Contents
- [Description](#description)
- [Release Notes](#release-notes)
- [Features](#features)
- [Installation](#installation)
- [Embed Video](#embed-video)
- [Paradigm](#paradigm)
- [Vue](#vue)
- [Responsiveness](#responsiveness)
- [License](#license)
- [Author](#author)
## Description
Embedia Vue is an embed package for Vue which can embed from platforms like Facebook, Instagram, TikTok, YouTube/Shorts, Twitter/X, Vimeo and Dailymotion.
Framework | Supported versions
------ | -------- |
 | 3 & above
-----
## Release-notes
Major Changes:
v1.0.0
- This library package offers a minimal syntax.
- Lightweight size
Minor Changes:
v1.2.0
- The embedded video for X and Instagram will be minimal.
- The embedded video for Vimeo has fixed the auto loop issue.
v1.1.0
- The embedded video for supports X.com.
Patch Changes:
v1.2.5
- Fixed the issue with embedding Vimeo videos regarding autoplay.
-------
## Features
- Easy to set-up and responsive.
- Supports embedding one or more videos from platforms including Facebook, Instagram, TikTok, YouTube, YouTube Shorts, X, Dailymotion, and Vimeo.
___________
[Click here: Demo](https://demjhonsilver.github.io/embedia-vue-docs)
-------------
## Installation
To install the Embedia Vue, you can use the following npm command:
```bash
npm install embedia-vue
```
--------
## Embed-video
Attributes |  |  |  |  |
------ | -------- | ----------|---------- |------------
Required? `width` | yes | | |
Required? `height` | yes | | |
Required? `fullscreen` | optional | | |
Required? `controls` | | | |
Required? `autoplay` | | | |
Required? `cssname` | optional | optional | optional | optional
Required? `clip` | yes | yes | yes | yes
---------
-------------------
Attributes |  |  |  |
------ | -------- | ----------|---------- |
Required? `width` | yes | yes | yes
Required? `height` | yes | yes | yes
Required? `fullscreen` | optional | optional |
Required? `controls` | optional | optional |
Required? `autoplay` | optional | optional |optional
Required? `cssname` | optional | optional | optional
Required? `clip` | yes | yes | yes
---------
## Width
You can copy and paste the following HD dimensions below:
---------------
---------------
Value | Width and Height
------- | ------------
854x480 | width: 854, height: 480
640x360 | width: 640, height: 360
426x240 | width: 426, height: 240
256x144 | width: 256, height: 144
------------
------------
## Paradigm
```js
<EmbediaVue
clip=""
width=""
height=""
:autoplay="false"
:fullscreen="false"
:controls="true"
cssname="rename-me-now"
/>
```
You can use any importing syntax script format:
```js
<script setup>
import { EmbediaVue } from 'embedia-vue';
</script>
```
or
```js
<script>
import { EmbediaVue } from 'embedia-vue';
export default {
components: {
EmbediaVue
}
};
</script>
```
For global usage (main.js)
```js
import { createApp } from 'vue';
import './style.css';
import App from './App.vue';
import router from './router';
import { EmbediaVue } from 'embedia-vue'; // Import global
createApp(App)
.component('EmbediaVue', EmbediaVue)
.use(router)
.mount('#app');
```
If you choose global, you can use the code below:
```js
<template>
<EmbediaVue
clip=""
width=""
height=""
/>
</template>
<style scoped>
</style>
```
-----------------------------------------------
______________________________________________
## Vue
```js
<template>
<EmbediaVue
clip="https://www.youtube.com/watch?v=oEXFMGK7IC0"
width="640"
height="360"
cssname="embed-clip"
/>
</template>
<script setup>
import { EmbediaVue } from 'embedia-vue';
</script>
<style scoped>
.embed-clip {
border: 2px solid green;
}
</style>
```
## Responsiveness
______
In your built-in default style.css ( body only )
-------
Change the display value from flex to block.
```css
body {
margin: 0;
display: block; // this code makes responsive
place-items: center;
min-width: 320px;
min-height: 100vh;
}
```
## License
MIT
- This library package is FREE. ❤️
----------------------------------------------------
## Author
Demjhon Silver