Embedrax

---

Table of Contents

• Description
• Release Notes
• Features
• Installation
• Embed Video
• Width
• React
• React TypeScript
• Vue
• Vue TypeScript
• Svelte
• Svelte TypeScript
• Angular
• Embed Css
• License
• 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.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.

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:

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

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 (
    <>
      <div className="embed-youtube-one-clip"></div>
    </>
  );
};

or

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 (
    <>
      <div className="embed-youtube-one-clip"></div>
    </>
  );
};

export default ExampleComponent

React-Typescript

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 (
    <>
      <div className="embed-tiktok"></div>
      <div className="embed-youtube-one-clip"></div>
    </>
  );
};

Vue

<template>
  <div>
    <div class="embed-youtube-one-clip"></div>
  </div>
</template>

<script>
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 {};
  },
};
</script>

Vue-Typescript

<script lang="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);
  });
</script>

<div>
  <div class="embed-tiktok"></div>
  <div class="embed-youtube-one-clip"></div>
</div>

Svelte

<script>
  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'
      }
    ]);
  });
</script>

<div>
  <div class="embed-youtube-one-clip"></div>
</div>

Svelte-Typescript

<template>
  <div>
    <div class="embed-tiktok"></div>
    <div class="embed-youtube-one-clip"></div>
  </div>
</template>

<script setup lang="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;
}

</script>

Angular

example.component.ts

import { Component, AfterViewInit } from '@angular/core';
import { embed } from 'embedrax';

@Component({
  selector: 'app-example',
  template: `
    <div class="embed-youtube-one-clip"></div>
  `,
  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

::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:

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

/* 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:

---

/* 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

• This library package is FREE. ❤️

---

Author

Demjhon Silver