{"id":14979889,"url":"https://github.com/micropackage/responsive-embeds","last_synced_at":"2025-08-01T00:32:53.932Z","repository":{"id":42931307,"uuid":"236569173","full_name":"micropackage/responsive-embeds","owner":"micropackage","description":"Simple JavaScript function to make any embed responsive","archived":false,"fork":false,"pushed_at":"2023-03-14T21:57:30.000Z","size":468,"stargazers_count":14,"open_issues_count":8,"forks_count":1,"subscribers_count":3,"default_branch":"develop","last_synced_at":"2024-09-28T03:41:05.983Z","etag":null,"topics":["bracketspace","dom","javascript-library","micropackage","node-module"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/micropackage.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"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":"2020-01-27T19:02:36.000Z","updated_at":"2022-03-09T12:45:33.000Z","dependencies_parsed_at":"2024-09-28T03:40:44.513Z","dependency_job_id":"381260ae-478e-41e1-b721-8389e56472af","html_url":"https://github.com/micropackage/responsive-embeds","commit_stats":{"total_commits":22,"total_committers":3,"mean_commits":7.333333333333333,"dds":"0.36363636363636365","last_synced_commit":"e59cbcb5050571c78d5f661ed9a457f1ac1def57"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/micropackage%2Fresponsive-embeds","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/micropackage%2Fresponsive-embeds/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/micropackage%2Fresponsive-embeds/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/micropackage%2Fresponsive-embeds/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/micropackage","download_url":"https://codeload.github.com/micropackage/responsive-embeds/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219858899,"owners_count":16556039,"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":["bracketspace","dom","javascript-library","micropackage","node-module"],"created_at":"2024-09-24T14:00:50.939Z","updated_at":"2024-10-11T20:03:33.244Z","avatar_url":"https://github.com/micropackage.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Responsive Embeds\n\n[![BracketSpace Micropackage](https://img.shields.io/badge/BracketSpace-Micropackage-brightgreen)](https://bracketspace.com)\n[![npm](https://img.shields.io/npm/v/@micropackage/responsive-embeds)](https://www.npmjs.com/package/@micropackage/responsive-embeds)\n[![License](https://img.shields.io/npm/l/@micropackage/responsive-embeds)](https://www.npmjs.com/package/@micropackage/responsive-embeds)\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"https://bracketspace.com/extras/micropackage/micropackage-small.png\" alt=\"Micropackage logo\"/\u003e\n\u003c/p\u003e\n\n## 🧬 About Responsive Embeds\n\nThis package provides a JavaScript function which can make any embed (like youtube video iframe) responsive.\n\n## 💾 Installation\n\n``` bash\nnpm install --save @micropackage/responsive-embeds\n```\nor\n``` bash\nyarn add @micropackage/responsive-embeds\n```\n\n## 🕹 Usage\n\n```javascript\nimport responsiveEmbeds from '@micropackage/responsive-embeds';\n\n// See arguments description below.\nresponsiveEmbeds( element, params );\n\nconst iframe = document.getElementById( 'some-iframe' );\nconst embeds = document.querySelectorAll( '.responsive-embed' );\n\nresponsiveEmbeds( 'iframe[src*=\"youtube.com\"]', {\n  watch: true,\n  wrapClass: 'my-custom-wrap',\n} );\nresponsiveEmbeds( iframe );\nresponsiveEmbeds( embeds );\n```\n\n### How it works?\n\nThis function wraps given element(s) in a `div` with relative position and `padding-top` set as percentage to match the original element's proportions. The element itself is positioned absolute inside this div with height and width set to `100%`.  This means the element will always match parent width also preserving it's original proportions.\n\nThis function can be used with any HTML element which initial proportions should be preserved.\n\n## ⚙️ Arguments\nThis function has two arguments.\n\n| Argument | Type                              | Description                                                                                                                              |\n|----------|-----------------------------------|------------------------------------------------------------------------------------------------------------------------------------------|\n| **element**  | *(string\\|HTMLElement\\|NodeList)* | This can be either string selector which will be passed to document.querySelectorAll or an HTML node (HTMLElement) or NodeList instance. |\n| **params**   | *(object)*                        | Additional params (see table below)\u003cbr/\u003e*(optional)*                                                                                                      |\n\n\n### Params\n| Param         | Type                        | Description                                                                                                                                                                                                                                                                                                                                                      |\n|---------------|-----------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| **wrapClass** | *(string)*                  | Class name applied to the wrapping div. \u003cbr/\u003e**Default:** `'responsive-embed-wrap'`                                                                                                                                                                                                                                                                              |\n| **watch**     | *(bool\\|string\\|HTMLElement)* | When using string selector as a first argument, this param can be used to observe changes in the DOM and make responsive all the items which will be added later. If this is set to `true` entire document is observed. Alternatively a string selector or HTMLElement object can be set to observe only changes inside given element. \u003cbr/\u003e**Default:** `false` |\n\n#### Watching example\nLet's say we have a WordPress theme with it's content wrapped in a `div.entry-content` element.\nWe are using some plugin which loads youtube videos using youtube API, so the iframes might not be present in the DOM while we initialise responsiveEmbeds.\n\n```JavaScript\nresponsiveEmbeds( 'iframe[src*=\"youtube.com\"]', {\n  watch: '.entry-content',\n} );\n```\nThis call will start observing the DOM changes inside the `div.entry-content` and will make responsive any added node which will match the selector `iframe[src*=\"youtube.com\"]`. It will also transform all the matching nodes which are already present in the DOM.\n\n## 📦 About the Micropackage project\n\nMicropackages - as the name suggests - are micro packages with a tiny bit of reusable code, helpful particularly in WordPress development.\n\nThe aim is to have multiple packages which can be put together to create something bigger by defining only the structure.\n\nMicropackages are maintained by [BracketSpace](https://bracketspace.com).\n\n## 📖 Changelog\n\n[See the changelog file](./CHANGELOG.md).\n\n## 📃 License\n\nGNU General Public License (GPL) v3.0. See the [LICENSE](./LICENSE) file for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmicropackage%2Fresponsive-embeds","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmicropackage%2Fresponsive-embeds","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmicropackage%2Fresponsive-embeds/lists"}