Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/demjhonsilver/embedrax
Embedrax is a free embed package for React, Vue, Angular, and Svelte which can embed from platforms like Facebook, Instagram, TikTok, YouTube/Shorts, Twitter/X, Vimeo and Dailymotion.
https://github.com/demjhonsilver/embedrax
angular dailymotion embedded facebook instagram react shorts svelte tiktok twitter videos vimeo vue youtube
Last synced: 3 days ago
JSON representation
Embedrax is a free embed package for React, Vue, Angular, and Svelte which can embed from platforms like Facebook, Instagram, TikTok, YouTube/Shorts, Twitter/X, Vimeo and Dailymotion.
- Host: GitHub
- URL: https://github.com/demjhonsilver/embedrax
- Owner: demjhonsilver
- License: other
- Created: 2024-03-27T09:15:39.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2024-05-11T14:32:04.000Z (6 months ago)
- Last Synced: 2024-10-03T14:36:21.900Z (about 1 month ago)
- Topics: angular, dailymotion, embedded, facebook, instagram, react, shorts, svelte, tiktok, twitter, videos, vimeo, vue, youtube
- Language: JavaScript
- Homepage: https://demjhonsilver.github.io/embedrax-demo
- Size: 134 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Embedrax
[](https://www.npmjs.com/package/embedrax)
[](https://github.com/demjhonsilver/embedrax/blob/main/LICENSE.md)
---------------------
## Table of Contents
- [Description](#description)
- [Release Notes](#release-notes)
- [Features](#features)
- [Installation](#installation)
- [Embed Video](#embed-video)
- [Width](#width)
- [React](#react)
- [React TypeScript](#react-typescript)
- [Vue](#vue)
- [Vue TypeScript](#vue-typescript)
- [Svelte](#svelte)
- [Svelte TypeScript](#svelte-typescript)
- [Angular](#angular)
- [Embed Css](#embed-css)
- [License](#license)
- [Author](#author)
## Description
Embedrax 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.
Frameworks / Libraries | Tested versions
------ | -------- |
 | 18 & above
 | 3 & above
 | 16 & above
 | 3 & above
-----
## Release-notes
Major Changes:
v1.0.0
- This library package is FREE.
- Lightweight size
Minor Changes:
v1.2.0
- Fixed the videoClass issue for embedding Instagram clips.
- Added a demo site.
[Embedrax - Demo](https://demjhonsilver.github.io/embedrax-demo)
v1.1.0
- Added support for embedding Instagram clips.
- Either video reels or video clips for Instagram.
Patch Changes:
v1.1.2
- Fixed the autoplay feature for dailymotion.
v1.1.1
- Add a clear sample to set the value of the [Width](#width).
v1.0.3
- The index.js will restore default location.
v1.0.2
- Fixed the alignment of the file resources.
v1.0.1
- Reminder
- Make sure your default `index.css` or `app.css` are not conflict, if you notice your css videos are not working properly.
---
Try to clear your existing css like `index.css` or `app.css` affected in React, Vue, Svelte and Angular.
See if it's working.
Then RESTORE the original `index.css` or `app.css` codes.
-------
## Features
- Easy to use and responsive.
- Capable of embedding one or many videos from platforms like Facebook, Instagram, TikTok, YouTube, YouTube Shorts, Twitter/X, Dailymotion and Vimeo.
- This library package is FREE.
- Lightweight size
- Supports both TypeScript and JavaScript.
-------------
## Installation
To install the Embedrax, you can use the following npm command:
```bash
npm install embedrax
```
--------
## Embed-video
Attributes | Type |  |  |  |   |
------ | -------- | -------- | ----------|---------- |------------
`width` | number | optional | | |
`height` | number | optional | | |
`fullscreen` | boolean | optional | | |
`controls` | boolean | | | |
`autoplay` | boolean | | | |
`videoClass` | string | required | required | required | required
`videoUrl` | 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
`videoClass` | string | required | required | required
`videoUrl` | string | required | required | required
---------
## Width
You can copy and paste the following HD dimensions below:
---------------
Value | Width and Height in the Component file | Width only from the classname CSS file
------- | ------------ | -------------------------
1280x720 | width: 1280, height: 720, | `.embed-youtube-one-clip { max-width: 1280px;}`
854x480 | width: 854, height: 480, | `.embed-youtube-one-clip { max-width: 854px;}`
640x360 | width: 640, height: 360,| `.embed-youtube-one-clip { max-width: 640px;}`
426x240 | width: 426, height: 240, | `.embed-youtube-one-clip { max-width: 426px;}`
256x144 | width: 256, height: 144, | `.embed-youtube-one-clip { max-width: 256px;}`
Use Google chrome as much as possible to load more videos properly.
------------
Recommended web browser for local test:
-----
--------
Reminder:
- Don't forget to restart your server.
------------
## React
```jsx
import { useEffect } from 'react';
import { embed } from 'embedrax';
export const ExampleComponent = () => {
useEffect(() => {
embed([
{
width: 854,
height: 480,
autoplay: true,
fullscreen: false,
controls: true,
videoUrl: 'https://www.youtube.com/watch?v=oEXFMGK7IC0',
videoClass: 'embed-youtube-one-clip'
}
])
});
return (
<>
>
);
};
```
or
```jsx
import { useEffect } from 'react';
import { embed } from 'embedrax';
const ExampleComponent = () => {
useEffect(() => {
embed([
{
width: 854,
height: 480,
autoplay: true,
fullscreen: false,
controls: true,
videoUrl: 'https://www.youtube.com/watch?v=oEXFMGK7IC0',
videoClass: 'embed-youtube-one-clip'
}
])
});
return (
<>
>
);
};
export default ExampleComponent
```
## React-Typescript
```ts
import { useEffect } from 'react';
import { embed } from 'embedrax';
interface VideoConfig {
width?: number;
height?: number;
autoplay?: boolean;
fullscreen?: boolean;
controls?: boolean;
videoUrl: string;
videoClass: string;
}
export const ExampleComponent: React.FC = () => {
const videos: VideoConfig[] = [
{
videoUrl: '',
videoClass: 'embed-tiktok',
},
{
width: 854,
height: 480,
autoplay: false,
fullscreen: true,
controls: true,
videoUrl: 'https://www.youtube.com/watch?v=oEXFMGK7IC0',
videoClass: 'embed-youtube-one-clip'
},
];
useEffect(() => {
embed(videos);
});
return (
<>
>
);
};
```
## Vue
```js
import { onMounted } from 'vue';
import { embed } from 'embedrax';
export default {
name: 'ExampleComponent',
setup() {
onMounted(() => {
embed([
{
width: 854,
height: 480,
autoplay: true,
fullscreen: false,
controls: true,
videoUrl: 'https://www.youtube.com/watch?v=oEXFMGK7IC0',
videoClass: 'embed-youtube-one-clip'
}
])
});
return {};
},
};
```
## Vue-Typescript
```ts
import { onMount } from 'svelte';
import { embed } from 'embedrax';
interface VideoConfig {
width?: number;
height?: number;
autoplay?: boolean;
fullscreen?: boolean;
controls?: boolean;
videoUrl: string;
videoClass: string;
}
const videos: VideoConfig[] = [
{
videoUrl: '',
videoClass: 'embed-tiktok'
},
{
width: 854,
height: 480,
autoplay: false,
fullscreen: true,
controls: true,
videoUrl: 'https://www.youtube.com/watch?v=oEXFMGK7IC0',
videoClass: 'embed-youtube-one-clip'
},
];
onMount(() => {
embed(videos);
});
```
## Svelte
```js
import { onMount } from 'svelte';
import { embed } from 'embedrax';
onMount(() => {
embed([
{
width: 854,
height: 480,
autoplay: true,
fullscreen: false,
controls: true,
videoUrl: 'https://www.youtube.com/watch?v=oEXFMGK7IC0',
videoClass: 'embed-youtube-one-clip'
}
]);
});
```
## Svelte-Typescript
```ts
import { onMounted } from 'vue';
import { embed } from 'embedrax';
const videos = <VideoConfig[]>([
{
videoUrl: '',
videoClass: 'embed-tiktok'
},
{
width: 854,
height: 480,
autoplay: false,
fullscreen: true,
controls: true,
videoUrl: 'https://www.youtube.com/watch?v=oEXFMGK7IC0',
videoClass: 'embed-youtube-one-clip'
},
]);
onMounted(() => {
embed(videos);
});
interface VideoConfig {
width?: number;
height?: number;
autoplay?: boolean;
fullscreen?: boolean;
controls?: boolean;
videoUrl: string;
videoClass: string;
}
```
## Angular
example.component.ts
```ts
import { Component, AfterViewInit } from '@angular/core';
import { embed } from 'embedrax';
@Component({
selector: 'app-example',
template: `
`,
styleUrls: ['./example.component.css'],
})
export class ExampleComponent implements AfterViewInit {
ngAfterViewInit() {
embed([
{
width: 854,
height: 480,
autoplay: true,
fullscreen: false,
controls: true,
videoUrl: 'https://www.youtube.com/watch?v=oEXFMGK7IC0',
videoClass: 'embed-youtube-one-clip'
}
]);
}
}
```
For Angular css:
---
[Angular embed Css](#embed-css)
```css
::ng-deep .embed-youtube-one-clip {
display: flex;
justify-content: center; /* Center horizontally */
align-items: center; /* Center vertically */
border: 2px solid orange;
width: 100%;
max-width: 854px;
margin: auto; /* Center the entire container horizontally */
}
```
## Embed-css
Make sure your default `index.css` or `app.css` are not conflict, if you notice your css videos are not working properly.
---
Try to clear your existing css like `index.css` or `app.css` affected in React, Vue, Svelte and Angular.
See if it's working.
Then RESTORE the original `index.css` or `app.css` codes.
You can add your own css set-up:
You may apply to app.css or index.css or any css file.
This is sample only, you can rename, recreate, and do something:
```css
.embed-youtube-one-clip {
display: flex;
justify-content: center;
align-items: center;
border: 2px solid orange;
width: 100%;
max-width: 854px;
margin: auto;
}
```
For more css embed video styles:
```css
/* app.css or index.css or any */
.embed-tiktok {
display: inline-flex;
position: relative;
width: 100%;
max-width: 370px;
max-height: 560;
float: left;
}
.embed-twitter {
display: inline-flex;
position: relative;
width: 100%;
max-width: 300px;
float: left;
}
.embed-youtube {
position: relative;
display: inline-flex;
width: 100%;
max-width: 640px;
max-height: 360; /* Allow the height to adjust proportionally */
float: left;
}
.embed-facebook {
display: inline-flex;
position: relative;
width: 100%;
max-width: 318px;
max-height: auto; /* Allow the height to adjust proportionally */
float: left;
}
.embed-facebook2 {
display: inline-flex;
position: relative;
width: 100%;
max-width: 318px;
max-height: auto; /* Allow the height to adjust proportionally */
float: left;
}
.embed-vimeo {
display: inline-flex;
/* You can assign any css properties */
}
.embed-dailymotion {
display: inline-flex;
/* You can assign any css properties */
}
```
CSS for Angular:
-------
```css
/* example/component.css */
::ng-deep .embed-tiktok {
display: inline-flex;
position: relative;
width: 100%;
max-width: 370px;
max-height: 560;
float: left;
}
::ng-deep .embed-twitter {
display: inline-flex;
position: relative;
width: 100%;
max-width: 300px;
float: left;
}
::ng-deep .embed-youtube {
position: relative;
display: inline-flex;
width: 100%;
max-width: 640px;
max-height: 360; /* Allow the height to adjust proportionally */
float: left;
}
::ng-deep .embed-facebook {
display: inline-flex;
position: relative;
width: 100%;
max-width: 318px;
max-height: auto; /* Allow the height to adjust proportionally */
float: left;
}
::ng-deep .embed-facebook2 {
display: inline-flex;
position: relative;
width: 100%;
max-width: 318px;
max-height: auto; /* Allow the height to adjust proportionally */
float: left;
}
::ng-deep .embed-vimeo {
display: inline-flex;
/* You can assign any css properties */
}
::ng-deep .embed-dailymotion {
display: inline-flex;
/* You can assign any css properties */
}
```
## License
[MIT](http://www.opensource.org/licenses/MIT)
- This library package is FREE. ❤️
----------------------------------------------------
## Author
Demjhon Silver