{"id":19645523,"url":"https://github.com/demjhonsilver/embedrax","last_synced_at":"2025-04-28T14:32:47.546Z","repository":{"id":230002686,"uuid":"778199041","full_name":"demjhonsilver/embedrax","owner":"demjhonsilver","description":"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.","archived":false,"fork":false,"pushed_at":"2024-05-11T14:32:04.000Z","size":137,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-10-03T14:36:21.900Z","etag":null,"topics":["angular","dailymotion","embedded","facebook","instagram","react","shorts","svelte","tiktok","twitter","videos","vimeo","vue","youtube"],"latest_commit_sha":null,"homepage":"https://demjhonsilver.github.io/embedrax-demo","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/demjhonsilver.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-03-27T09:15:39.000Z","updated_at":"2024-08-30T16:17:51.000Z","dependencies_parsed_at":"2024-04-01T13:42:36.024Z","dependency_job_id":"87a5137e-d01b-4943-b54d-4a7be01c2446","html_url":"https://github.com/demjhonsilver/embedrax","commit_stats":null,"previous_names":["demjhonsilver/embedrax"],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/demjhonsilver%2Fembedrax","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/demjhonsilver%2Fembedrax/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/demjhonsilver%2Fembedrax/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/demjhonsilver%2Fembedrax/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/demjhonsilver","download_url":"https://codeload.github.com/demjhonsilver/embedrax/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223727349,"owners_count":17192933,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","dailymotion","embedded","facebook","instagram","react","shorts","svelte","tiktok","twitter","videos","vimeo","vue","youtube"],"created_at":"2024-11-11T14:34:17.902Z","updated_at":"2024-11-11T14:34:18.922Z","avatar_url":"https://github.com/demjhonsilver.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/demjhonsilver/embedrax/main/img/logo.png\" alt=\"Logo\" width=\"70\" height=\"70\"/\u003e\n\u003c/p\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n# Embedrax \n\n[![npm version](https://img.shields.io/npm/v/embedrax.svg?logo=npm\u0026style=flat-square\u0026label=Latest\u0026color=blue)](https://www.npmjs.com/package/embedrax)\n![Package Size](https://img.shields.io/bundlephobia/minzip/embedrax?style=flat-square\u0026color=darkgreen)\n![Downloads](https://img.shields.io/npm/dt/embedrax.svg?style=flat-square\u0026label=Downloads\u0026color=orange)\n[![License](https://img.shields.io/npm/l/embedrax.svg?style=flat-square\u0026label=License\u0026color=green)](https://github.com/demjhonsilver/embedrax/blob/main/LICENSE.md)\n\n\n\n\n\n\n\u003c/div\u003e\n\n\n\n\n---------------------\n\n## Table of Contents\n\n- [Description](#description)\n- [Release Notes](#release-notes)\n- [Features](#features)\n- [Installation](#installation)\n- [Embed Video](#embed-video)\n- [Width](#width)\n- [React](#react)\n- [React TypeScript](#react-typescript)\n- [Vue](#vue)\n- [Vue TypeScript](#vue-typescript)\n- [Svelte](#svelte)\n- [Svelte TypeScript](#svelte-typescript)\n- [Angular](#angular)\n- [Embed Css](#embed-css)\n- [License](#license)\n- [Author](#author)\n\n## Description\n\nEmbedrax 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.\n\n\nFrameworks / Libraries | Tested versions\n------ | -------- | \n ![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge\u0026logo=react\u0026logoColor=%2361DAFB) | 18 \u0026 above\n![Vue.js](https://img.shields.io/badge/vuejs-%2335495e.svg?style=for-the-badge\u0026logo=vuedotjs\u0026logoColor=%234FC08D)  | 3 \u0026 above\n![Angular](https://img.shields.io/badge/angular-%23DD0031.svg?style=for-the-badge\u0026logo=angular\u0026logoColor=white)  | 16 \u0026 above\n![Svelte](https://img.shields.io/badge/svelte-%23f1413d.svg?style=for-the-badge\u0026logo=svelte\u0026logoColor=white) | 3 \u0026 above\n\n-----\n\n## Release-notes\n\n\nMajor Changes:\n v1.0.0\n - This library package is FREE.\n - Lightweight size \n\n\nMinor Changes:\n\n v1.2.0\n - Fixed the videoClass issue for embedding Instagram clips.\n - Added a demo site.\n   [Embedrax - Demo](https://demjhonsilver.github.io/embedrax-demo)\n\n\n\n v1.1.0\n - Added support for embedding Instagram clips.\n - Either video reels or video clips for Instagram.\n\nPatch Changes:\n\n v1.1.2\n - Fixed the autoplay feature for dailymotion.\n\n v1.1.1\n - Add a clear sample to set the value of the [Width](#width).\n\n v1.0.3\n - The index.js will restore default location.\n\n v1.0.2\n - Fixed the alignment of the file resources.\n\n v1.0.1\n - Reminder\n - Make sure your default `index.css` or `app.css` are not conflict, if you notice your css videos are not working properly.\n\n---\nTry to clear your existing css like `index.css` or `app.css` affected in React, Vue, Svelte and Angular. \nSee if it's working.\nThen RESTORE the original `index.css` or `app.css` codes.\n\n-------\n\n\n## Features\n\n- Easy to use and responsive.\n- Capable of embedding one or many videos from platforms like Facebook, Instagram, TikTok, YouTube, YouTube Shorts, Twitter/X, Dailymotion and Vimeo.\n - This library package is FREE.\n - Lightweight size \n - Supports both TypeScript and JavaScript.\n-------------\n## Installation\n\nTo install the Embedrax, you can use the following npm command:\n\n```bash\nnpm install embedrax\n```\n\n\n--------\n\n## Embed-video\nAttributes | Type | ![Facebook](https://img.shields.io/badge/Facebook-%231877F2.svg?style=for-the-badge\u0026logo=Facebook\u0026logoColor=white) | ![Instagram](https://img.shields.io/badge/Instagram-%23E4405F.svg?style=for-the-badge\u0026logo=Instagram\u0026logoColor=white) | ![TikTok](https://img.shields.io/badge/TikTok-%23000000.svg?style=for-the-badge\u0026logo=TikTok\u0026logoColor=white)  | ![Twitter](https://img.shields.io/badge/Twitter-%231DA1F2.svg?style=for-the-badge\u0026logo=Twitter\u0026logoColor=white) ![X](https://img.shields.io/badge/X-%23000000.svg?style=for-the-badge\u0026logo=X\u0026logoColor=white) |\n------ | -------- | -------- | ----------|---------- |------------\n`width` | number |  optional | |  | \n`height` |  number | optional |  |  | \n`fullscreen` | boolean | optional |  |  |  \n`controls` | boolean | |  |  |  \n`autoplay` | boolean | |  |  |   \n`videoClass` | string | required | required | required | required\n`videoUrl` | string | required | required | required | required\n---------\n\n-------------------\n\n\nAttributes | Type | ![YouTube](https://img.shields.io/badge/YouTube-%23FF0000.svg?style=for-the-badge\u0026logo=YouTube\u0026logoColor=white) | ![Vimeo](https://a11ybadges.com/badge?logo=vimeo) | ![Dailymotion](https://a11ybadges.com/badge?logo=dailymotion) |\n------ | -------- | -------- | ----------|----------\n`width` | number | optional | optional | optional\n`height` |  number | optional | optional | optional\n`fullscreen` | boolean | optional | optional | optional\n`controls` | boolean | optional | optional | optional\n`autoplay` | boolean | optional | optional |optional\n`videoClass` | string | required | required | required\n`videoUrl` | string | required | required | required\n---------\n\n\n## Width\n\nYou can copy and paste the following HD dimensions below:\n---------------\n\nValue | Width and Height in the Component file | Width only from the classname CSS file\n------- | ------------ | -------------------------\n1280x720 | width: 1280, height: 720, | `.embed-youtube-one-clip { max-width: 1280px;}`\n854x480 | width: 854, height: 480, | `.embed-youtube-one-clip { max-width: 854px;}`\n640x360 | width: 640, height: 360,| `.embed-youtube-one-clip { max-width: 640px;}`\n426x240 | width: 426, height: 240, | `.embed-youtube-one-clip { max-width: 426px;}`\n256x144 | width: 256, height: 144, | `.embed-youtube-one-clip { max-width: 256px;}`\n\nUse Google chrome as much as possible to load more videos properly.\n\n------------\nRecommended web browser for local test:\n-----\n![Google Chrome](https://img.shields.io/badge/Google%20Chrome-4285F4?style=for-the-badge\u0026logo=GoogleChrome\u0026logoColor=white)\n--------\n\nReminder:\n\n- Don't forget to restart your server.\n\n\n------------\n## React\n```jsx\nimport { useEffect } from 'react';\nimport { embed } from 'embedrax';\n\nexport const ExampleComponent = () =\u003e {\n  useEffect(() =\u003e {\n    embed([\n      {\n        width: 854,\n        height: 480,\n        autoplay: true,\n        fullscreen: false,\n        controls: true,\n        videoUrl: 'https://www.youtube.com/watch?v=oEXFMGK7IC0',\n        videoClass: 'embed-youtube-one-clip' \n      }\n    ])\n  });\n  return (\n    \u003c\u003e\n      \u003cdiv className=\"embed-youtube-one-clip\"\u003e\u003c/div\u003e\n    \u003c/\u003e\n  );\n};\n```\n\nor \n\n```jsx\nimport { useEffect } from 'react';\nimport { embed } from 'embedrax';\n\nconst ExampleComponent = () =\u003e {\n  useEffect(() =\u003e {\n    embed([\n      {\n        width: 854,\n        height: 480,\n        autoplay: true,\n        fullscreen: false,\n        controls: true,\n        videoUrl: 'https://www.youtube.com/watch?v=oEXFMGK7IC0',\n        videoClass: 'embed-youtube-one-clip' \n      }\n    ])\n  });\n  return (\n    \u003c\u003e\n      \u003cdiv className=\"embed-youtube-one-clip\"\u003e\u003c/div\u003e\n    \u003c/\u003e\n  );\n};\n\nexport default ExampleComponent\n```\n\n\n## React-Typescript\n\n```ts\nimport { useEffect } from 'react';\nimport { embed } from 'embedrax';\n\ninterface VideoConfig {\n  width?: number;\n  height?: number;\n  autoplay?: boolean;\n  fullscreen?: boolean;\n  controls?: boolean;\n  videoUrl: string;\n  videoClass: string;\n}\n\nexport const ExampleComponent: React.FC = () =\u003e {\n  const videos: VideoConfig[] = [\n    {\n      videoUrl: '',\n      videoClass: 'embed-tiktok',\n    },\n    {\n        width: 854,\n        height: 480,\n        autoplay: false,\n        fullscreen: true,\n        controls: true,\n        videoUrl: 'https://www.youtube.com/watch?v=oEXFMGK7IC0',\n        videoClass: 'embed-youtube-one-clip' \n    },\n  ];\n\n  useEffect(() =\u003e {\n    embed(videos);\n  });\n\n  return (\n    \u003c\u003e\n      \u003cdiv className=\"embed-tiktok\"\u003e\u003c/div\u003e\n      \u003cdiv className=\"embed-youtube-one-clip\"\u003e\u003c/div\u003e\n    \u003c/\u003e\n  );\n};\n\n```\n\n\n\n\n\n## Vue\n```js\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cdiv class=\"embed-youtube-one-clip\"\u003e\u003c/div\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport { onMounted } from 'vue';\nimport { embed } from 'embedrax';\n\nexport default {\n  name: 'ExampleComponent',\n  setup() {\n\n    onMounted(() =\u003e {\n      embed([\n        {\n          width: 854,\n          height: 480,\n          autoplay: true,\n          fullscreen: false,\n          controls: true,\n          videoUrl: 'https://www.youtube.com/watch?v=oEXFMGK7IC0',\n          videoClass: 'embed-youtube-one-clip'\n        }\n      ])\n    });\n\n    return {};\n  },\n};\n\u003c/script\u003e\n```\n## Vue-Typescript\n\n\n```ts\n\u003cscript lang=\"ts\"\u003e\n  import { onMount } from 'svelte';\n  import { embed } from 'embedrax';\n\n  interface VideoConfig {\n    width?: number;\n    height?: number;\n    autoplay?: boolean;\n    fullscreen?: boolean;\n    controls?: boolean;\n    videoUrl: string;\n    videoClass: string;\n  }\n\n  const videos: VideoConfig[] = [\n    {\n      videoUrl: '',\n      videoClass: 'embed-tiktok' \n    },\n    {\n        width: 854,\n        height: 480,\n        autoplay: false,\n        fullscreen: true,\n        controls: true,\n        videoUrl: 'https://www.youtube.com/watch?v=oEXFMGK7IC0',\n        videoClass: 'embed-youtube-one-clip' \n    },\n  ];\n\n  onMount(() =\u003e {\n    embed(videos);\n  });\n\u003c/script\u003e\n\n\u003cdiv\u003e\n  \u003cdiv class=\"embed-tiktok\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"embed-youtube-one-clip\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\n\n\n## Svelte \n\n```js\n\u003cscript\u003e\n  import { onMount } from 'svelte';\n  import { embed } from 'embedrax';\n\n  onMount(() =\u003e {\n    embed([\n      {\n        width: 854,\n        height: 480,\n        autoplay: true,\n        fullscreen: false,\n        controls: true,\n        videoUrl: 'https://www.youtube.com/watch?v=oEXFMGK7IC0',\n        videoClass: 'embed-youtube-one-clip'\n      }\n    ]);\n  });\n\u003c/script\u003e\n\n\u003cdiv\u003e\n  \u003cdiv class=\"embed-youtube-one-clip\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\n## Svelte-Typescript\n\n```ts\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cdiv class=\"embed-tiktok\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"embed-youtube-one-clip\"\u003e\u003c/div\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript setup lang=\"ts\"\u003e\nimport { onMounted } from 'vue';\nimport { embed } from 'embedrax';\n\nconst videos = \u003cVideoConfig[]\u003e([\n  {\n    videoUrl: '',\n    videoClass: 'embed-tiktok'\n  },\n  {\n        width: 854,\n        height: 480,\n        autoplay: false,\n        fullscreen: true,\n        controls: true,\n        videoUrl: 'https://www.youtube.com/watch?v=oEXFMGK7IC0',\n        videoClass: 'embed-youtube-one-clip' \n  },\n]);\n\nonMounted(() =\u003e {\n  embed(videos);\n});\n\ninterface VideoConfig {\n  width?: number;\n  height?: number;\n  autoplay?: boolean;\n  fullscreen?: boolean;\n  controls?: boolean;\n  videoUrl: string;\n  videoClass: string;\n}\n\n\u003c/script\u003e\n```\n\n\n## Angular \n\nexample.component.ts\n\n```ts\nimport { Component, AfterViewInit } from '@angular/core';\nimport { embed } from 'embedrax';\n\n@Component({\n  selector: 'app-example',\n  template: `\n    \u003cdiv class=\"embed-youtube-one-clip\"\u003e\u003c/div\u003e\n  `,\n  styleUrls: ['./example.component.css'],\n})\nexport class ExampleComponent implements AfterViewInit {\n\n  ngAfterViewInit() {\n    embed([\n      {\n          width: 854,\n          height: 480,\n          autoplay: true,\n          fullscreen: false,\n          controls: true,\n          videoUrl: 'https://www.youtube.com/watch?v=oEXFMGK7IC0',\n          videoClass: 'embed-youtube-one-clip'\n      }\n    ]);\n  }\n}  \n```\nFor Angular css:\n\n---\n\n[Angular embed Css](#embed-css)\n\n```css\n::ng-deep .embed-youtube-one-clip {\n  display: flex;\n  justify-content: center; /* Center horizontally */\n  align-items: center; /* Center vertically */\n  border: 2px solid orange;\n  width: 100%;\n  max-width: 854px;\n  margin: auto; /* Center the entire container horizontally */\n}\n```\n\n## Embed-css\n\n\n\n\u003cp align=\"center\"\u003e\n\n  \u003cimg src=\"https://raw.githubusercontent.com/demjhonsilver/embedrax/main/img/sample.png\"/\u003e\n\n\u003c/p\u003e\n\n\nMake sure your default `index.css` or `app.css` are not conflict, if you notice your css videos are not working properly.\n\n---\nTry to clear your existing css like `index.css` or `app.css` affected in React, Vue, Svelte and Angular. \nSee if it's working.\nThen RESTORE the original `index.css` or `app.css` codes.\n\n\n\nYou can add your own css set-up: \u003c!-- You can rename, change color, resize, positioning etc. --\u003e\n\nYou may apply to app.css or index.css or any css file.\n\nThis is sample only, you can rename, recreate, and do something:\n```css\n.embed-youtube-one-clip {\n  display: flex;\n  justify-content: center; \n  align-items: center; \n  border: 2px solid orange;\n  width: 100%;\n  max-width: 854px;\n  margin: auto; \n}\n```\nFor more css embed video styles:\n\n```css\n/* app.css  or index.css or any */\n\n.embed-tiktok {\n  display: inline-flex;\n  position: relative;\n  width: 100%;\n  max-width: 370px;\n  max-height: 560; \n  float: left;\n}\n\n.embed-twitter {\n  display: inline-flex;\n  position: relative;\n  width: 100%;\n  max-width: 300px;\n  float: left;\n}\n.embed-youtube {\n  position: relative;\n  display: inline-flex;\n  width: 100%;\n  max-width: 640px;\n  max-height: 360; /* Allow the height to adjust proportionally */\n  float: left;\n}\n.embed-facebook {\n  display: inline-flex;\n  position: relative;\n  width: 100%;\n  max-width: 318px;\n  max-height: auto; /* Allow the height to adjust proportionally */\n  float: left;\n}\n\n.embed-facebook2 {\n  display: inline-flex;\n  position: relative;\n  width: 100%;\n  max-width: 318px;\n  max-height: auto; /* Allow the height to adjust proportionally */\n  float: left;\n}\n\n.embed-vimeo {\n  display: inline-flex;\n/* You can assign any css properties */\n}\n\n.embed-dailymotion {\n  display: inline-flex;\n/* You can assign any css properties */\n}\n```\n\nCSS for Angular:\n\n-------\n\n```css\n/* example/component.css */\n\n::ng-deep .embed-tiktok {\n  display: inline-flex;\n  position: relative;\n  width: 100%;\n  max-width: 370px;\n  max-height: 560; \n  float: left;\n}\n\n::ng-deep .embed-twitter {\n  display: inline-flex;\n  position: relative;\n  width: 100%;\n  max-width: 300px;\n  float: left;\n}\n::ng-deep .embed-youtube {\n  position: relative;\n  display: inline-flex;\n  width: 100%;\n  max-width: 640px;\n  max-height: 360; /* Allow the height to adjust proportionally */\n  float: left;\n}\n::ng-deep .embed-facebook {\n  display: inline-flex;\n  position: relative;\n  width: 100%;\n  max-width: 318px;\n  max-height: auto; /* Allow the height to adjust proportionally */\n  float: left;\n}\n\n::ng-deep .embed-facebook2 {\n  display: inline-flex;\n  position: relative;\n  width: 100%;\n  max-width: 318px;\n  max-height: auto; /* Allow the height to adjust proportionally */\n  float: left;\n}\n\n::ng-deep .embed-vimeo {\n  display: inline-flex;\n/* You can assign any css properties */\n}\n\n::ng-deep .embed-dailymotion {\n  display: inline-flex;\n/* You can assign any css properties */\n}\n```\n\n\n\n\n\n\n\n## License\n\n[MIT](http://www.opensource.org/licenses/MIT)\n\n- This library package is FREE. ❤️\n----------------------------------------------------\n## Author\n\nDemjhon Silver\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdemjhonsilver%2Fembedrax","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdemjhonsilver%2Fembedrax","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdemjhonsilver%2Fembedrax/lists"}