{"id":13851606,"url":"https://github.com/toddmotto/fluidvids","last_synced_at":"2025-04-05T00:09:18.885Z","repository":{"id":6520296,"uuid":"7761201","full_name":"toddmotto/fluidvids","owner":"toddmotto","description":"Fluid width (responsive) videos module, 1KB, custom players, dynamic elements/XHR support.","archived":false,"fork":false,"pushed_at":"2022-08-11T23:13:32.000Z","size":170,"stargazers_count":414,"open_issues_count":14,"forks_count":74,"subscribers_count":22,"default_branch":"master","last_synced_at":"2024-10-12T08:10:10.334Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://toddmotto.com/labs/fluidvids","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/toddmotto.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-01-22T21:03:08.000Z","updated_at":"2024-08-28T18:45:04.000Z","dependencies_parsed_at":"2022-08-11T01:30:21.307Z","dependency_job_id":null,"html_url":"https://github.com/toddmotto/fluidvids","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/toddmotto%2Ffluidvids","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/toddmotto%2Ffluidvids/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/toddmotto%2Ffluidvids/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/toddmotto%2Ffluidvids/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/toddmotto","download_url":"https://codeload.github.com/toddmotto/fluidvids/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247266564,"owners_count":20910836,"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":[],"created_at":"2024-08-04T22:00:36.448Z","updated_at":"2025-04-05T00:09:18.863Z","avatar_url":"https://github.com/toddmotto.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","[Vanilla JavaScript](https://plainjs.com/) plugins"],"sub_categories":[],"readme":"# fluidvids.js [![Build Status](https://travis-ci.org/toddmotto/fluidvids.svg)](https://travis-ci.org/toddmotto/fluidvids)\n\nFluidvids is a 1KB standalone module that provides a fluid solution for video embeds. Fluidvids has the ability for custom players to be added as well as support for dynamically injected (XHR/Ajax/createElement) videos.\n\n\u003e [Live demo of fluidvids](http://toddmotto.com/labs/fluidvids).\n\n* Polymer.js [Web Component](//github.com/toddmotto/fluidvids-polymer) version\n* React.js [component](//github.com/toddmotto/fluidvids-react) version\n* [WordPress plugin](http://wordpress.org/plugins/fluidvids) version\n\n## Methods\n\n#### init()\nPass in your configuration. That's it.\n\n```javascript\nfluidvids.init({\n  selector: ['iframe', 'object'], // runs querySelectorAll()\n  players: ['www.youtube.com', 'player.vimeo.com'] // players to support\n});\n```\n\n#### selector\nType: `Array` Default: `['iframe']`\n\nCustom selector(s) that `fluidvids` will search for in the DOM and make fluid.\n\n#### players\nType: `Array` Default: `['www.youtube.com', 'player.vimeo.com']`\n\nInternally constructs a strict `RegExp` which tells `fluidvids` which videos from specific domains to make fluid. This avoids any unwanted videos being parsed and adds developer flexibility.\n\n#### render()\nProvides dynamic video support. Using `render()` should only be done when you want to requery the DOM and look for newly added videos, such as `document.createElement('iframe');`. Fluidvids uses internal object caching to lookup `init()` configuration, so it's lightning fast.\n\n```javascript\n// run after dynamic elements have been injected\n// you'll need to run this each time you need it\nfluidvids.render();\n```\n\n## Installing with Bower\nUse the repository hook:\n\n```\nbower install https://github.com/toddmotto/fluidvids.git\n```\n\n## Installing with [browserify](https://github.com/substack/node-browserify)\nUse the repository hook:\n\n```\nnpm install toddmotto/fluidvids\n```\n\nThen require `fluidvids` in your file:\n\n```javascript\n// Note that it is called as a function\nvar fluidvids = require('fluidvids.js')();\n```\n\n## Manual installation\nEnsure you're using the files from the `dist` directory (contains compiled production-ready code). Ensure you place the script before the closing `\u003c/body\u003e` tag.\n\t\n```html\n\u003cbody\u003e\n  \u003c!-- html above --\u003e\n  \u003cscript src=\"dist/fluidvids.js\"\u003e\u003c/script\u003e\n  \u003cscript\u003e\n  // fluidvids module available\n  \u003c/script\u003e\n\u003c/body\u003e\n```\n\n## Contributing\nIn lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.\n\n## Release history\n- 2.4.1\n  - Fix bug for class names already existing on host element\n  - Update Jasmine test accordingly\n- 2.4.0\n  - Fix bug for comparing width/height attrs `\u003e 1000`\n  - Finish all unit tests\n  - Move to Gulp\n- 2.3.0\n  - Add support for videos where `height \u003e width`\n  - Multiple `selector` support and CSS change to unrestrict element type\n  - Add `npm` entry point\n  - Change `apply()` to `render()` for better naming\n  - Use while loop for and improved loop perf\n- 2.2.0\n  - XHR/Ajax content support via new `apply()` method to requery DOM\n  - Add AMD support\n- 2.1.0\n  - Fix IE8 bug\n- 2.0.0\n  - Complete rewrite using Module pattern with public methods\n  - Better ability to add custom players\n  - Add a custom selector\n- 1.2.0\n  - Make use of Prototypes\n- 1.1.0\n  - Better structure\n- 1.0.0\n  - Initial release\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftoddmotto%2Ffluidvids","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftoddmotto%2Ffluidvids","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftoddmotto%2Ffluidvids/lists"}