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

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

  v1.2.2

• Fixed the issue with embedding x.com, which restores the embedded post with a card rather than just a video.

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

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