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 TikTok, YouTube/Shorts, Twitter/X, Vimeo and Dailymotion.

Framework | Supported versions ------ | -------- | | 3 & above

Release-notes

Major Changes:

v2.0.0

• The maximum default width and height are 1366×768.
• Embedding videos from Facebook and Instagram is deprecated.
• All tests passed using Vue Test Utils. (Vitest)

Features

• Easy to set-up and responsive.
• Supports embedding one or more videos from platforms including 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 | | | 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 ------- | ------------ 1366×768 | width: 1366, height: 768 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 )

Remove this: place-items: center;

body {
  margin: 0;
  display: block; 
  place-items: center; // Remove this code to make it responsive, if it exists.
  min-width: 320px;
  min-height: 100vh;
}

License

MIT

• This library package is FREE. ❤️

Author

Demjhon Silver