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

• The embedded video for Twitter supports x.com.

Patch Changes: v1.1.1

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

Features

• Easy to set-up and responsive.
• Supports embedding one or more videos from platforms including Facebook, Instagram, TikTok, YouTube, YouTube Shorts, Twitter/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 {
  float: right;
  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