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 has fixed the auto loop issue.

v1.1.0

• The embedded video for supports X.com.

Patch Changes:

v1.2.4

• Fixed the issue with embedding vimeo.com concerning the autoplay.

v1.2.3

• Fixed the issue with embedding x.com concerning the width.

---

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	yes	yes	no	yes
Required? height	yes	no	no	no
Required? fullscreen	optional	no	no	no
Required? controls	no	no	no	no
Required? autoplay	no	no	no	no
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	optional
Required? controls	optional	optional	no
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