embedia-vue

Embedia Vue

---

Table of Contents

• Description
• Release Notes
• Features
• Installation
• Embed Video
• Paradigm
• Vue
• Responsiveness
• License
• 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 fixed the auto loop issue.

v1.1.0

• The embedded video for supports X.com.

Patch Changes:

v1.1.1

• The border line has been removed from the embedded YouTube clip.

v1.1.2

• Fixed the issue with embedding x.com.

v1.1.3

• Fixed the issue with muted vimeo.

---

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

---

Installation

To install the Embedia Vue, you can use the following npm command:

npm install embedia-vue

---

Embed-video

Attributes
Required? width	optional
Required? height	optional
Required? fullscreen	optional
Required? controls	optional
Required? autoplay	optional
Required? cssname	optional	optional	optional	optional
Required? clip	yes	yes	yes	yes

---

---

Attributes
Required? width	optional	optional	optional
Required? height	optional	optional	optional
Required? fullscreen	optional	optional	optional
Required? controls	optional	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

  <EmbediaVue
    clip=""
    width=""
    height=""
    :autoplay="false"
    :fullscreen="false"
    :controls="true"
    cssname="rename-me-now"
  />

You can use any importing syntax script format:

<script setup>
import { EmbediaVue } from 'embedia-vue';
</script>

or

<script>
import { EmbediaVue } from 'embedia-vue';

export default {
  components: {
    EmbediaVue
  }
};
</script>

For global usage (main.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:

<template>
  <EmbediaVue
    clip=""
    width=""
    height=""
  />
</template>
<style scoped>
</style>

---

---

Vue

<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.

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