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 React, Vue, Angular, and Svelte 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-alpha.1

• This library package offers a minimal syntax.
• Lightweight size

---

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.

---

Installation

To install the Embedia Vue, you can use the following npm command:

npm install embedia-vue

---

Embed-video

Attributes	Type
width	number	optional
height	number	optional
fullscreen	boolean	optional
controls	boolean
autoplay	boolean
cssname	string	required	required	required	required
clip	string	required	required	required	required

---

---

Attributes	Type
width	number	optional	optional	optional
height	number	optional	optional	optional
fullscreen	boolean	optional	optional	optional
controls	boolean	optional	optional	optional
autoplay	boolean	optional	optional	optional
cssname	string	required	required	required
clip	string	required	required	required

---

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

---

Recommended web browser for local test:

Reminder:

• Don't forget to restart your server.

---

Paradigm

  <Embedia
    clip="https://www.youtube.com/watch?v=oEXFMGK7IC0"
    width=""
    height=""
    :autoplay="false"
    :fullscreen="false"
    :controls="true"
    cssname="rename-me-now"
  />

Vue

<template>
  <Embedia
    clip="https://www.youtube.com/watch?v=oEXFMGK7IC0"
    width="640"
    height="360"
    cssname="embed-clip"
  />
</template>

<script setup>
import { Embedia } from 'embedia-vue';
</script>

<style scoped>
.embed-clip {
  float: right; 
}
</style>

Responsiveness

To make responsive clip

---

In your default style.css (body only)

---

Change the display value from flex to block.

body {
  margin: 0;
  display: block;
  place-items: center;
  min-width: 320px;
  min-height: 100vh;
}

You can do anything here:

.embed-clip {
  float: left; 
  border: 2px solid green;
}

License

MIT

• This library package is FREE. ❤️

---

Author

Demjhon Silver