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
Required? clip	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:

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