{"id":15021067,"url":"https://github.com/hello-motto/videos-modal","last_synced_at":"2026-03-13T18:06:25.897Z","repository":{"id":49292562,"uuid":"195066748","full_name":"hello-motto/videos-modal","owner":"hello-motto","description":"A little JS plugin for videos embed working with tarteaucitronjs","archived":false,"fork":false,"pushed_at":"2024-06-11T17:37:30.000Z","size":582,"stargazers_count":3,"open_issues_count":2,"forks_count":1,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-02-05T06:37:18.605Z","etag":null,"topics":["dailymotion","fancybox","gdpr","lightbox","modal","no-jquery","rgpd","tarteaucitron","tarteaucitronjs","videos","vimeo","youtube"],"latest_commit_sha":null,"homepage":"https://videos-modal.hello-motto.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hello-motto.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-07-03T14:08:40.000Z","updated_at":"2021-11-26T20:14:45.000Z","dependencies_parsed_at":"2024-11-22T00:01:25.579Z","dependency_job_id":null,"html_url":"https://github.com/hello-motto/videos-modal","commit_stats":{"total_commits":55,"total_committers":5,"mean_commits":11.0,"dds":0.1454545454545455,"last_synced_commit":"dda3ae0030b2b6a2609648cbca8398946fb77b43"},"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hello-motto%2Fvideos-modal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hello-motto%2Fvideos-modal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hello-motto%2Fvideos-modal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hello-motto%2Fvideos-modal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hello-motto","download_url":"https://codeload.github.com/hello-motto/videos-modal/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238471942,"owners_count":19478133,"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":["dailymotion","fancybox","gdpr","lightbox","modal","no-jquery","rgpd","tarteaucitron","tarteaucitronjs","videos","vimeo","youtube"],"created_at":"2024-09-24T19:56:05.772Z","updated_at":"2026-03-13T18:06:25.839Z","avatar_url":"https://github.com/hello-motto.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Videos Modal\n[![NPM @latest](https://img.shields.io/npm/v/hello-motto-videos-modal.svg)](https://www.npmjs.com/package/hello-motto-videos-modal)\u003cbr\u003e\n\nA little JS plugin for videos embed working with tarteaucitronjs.\u003cbr\u003e\n\n[![NPM stats](https://nodei.co/npm/hello-motto-videos-modal.svg?downloadRank=true\u0026downloads=true)](https://www.npmjs.org/package/hello-motto-videos-modal)\n\n## Installation\n\n### Node.js JavaScript\n\nYou may install the NPM package `hello-motto-videos-modal`. When installed you can add it in your resources.\n\n```bash\n$ npm install hello-motto-videos-modal\n```\n\n### Direct download\n\nInstead of using NPM, it is possible to download [the last stable version here](https://github.com/hello-motto/videos-modal/archive/master.zip) and use the files that you need.\n\n### HTML\n\nInclude `videos-modal.css` or `videos-modal.min.css` stylesheet :\n```html\n\u003c!-- Normal version --\u003e\n\u003clink rel=\"stylesheet\" href=\"videos-modal.css\"/\u003e\n\u003c!-- OR the minified version --\u003e\n\u003clink rel=\"stylesheet\" href=\"videos-modal.min.css\"/\u003e\n```\n\nInclude `videos-modal.js` or `videos-modal.min.js` script :\n```html\n\u003c!-- Normal version --\u003e\n\u003cscript src=\"videos-modal.js\"\u003e\u003c/script\u003e\n\u003c!-- OR the minified and uglyfied version --\u003e\n\u003cscript src=\"videos-modal.min.js\"\u003e\u003c/script\u003e\n```\n\n## Usage\n\nThis is a script that show videos (from youtube or others) into a modal. It's working with tarteaucitron and videos will be blocked if the provider (Youtube for example) is not allowed by the user.\u003cbr\u003e\nExamples below can be found in the [example page](https://videos-modal.hello-motto.com//multi-providers.html)\nand in the [example without tarteaucitron page](https://videos-modal.hello-motto.com/without-tarteaucitron.html).\n\n### Create JavaScript Object\n\nTo instanciate the object it is possible to pass an optional JSON object as argument. This object is optional because\nall the parameters have default values and most of them can be overwritten by each link.\u003cbr\u003e\nHere are the options with the by default values.\u003cbr\u003e\nOnly options beginning with `video_` can be overwritten by link attributes.\n\n```js\nvar videosModal = new VideosModal({\n    closeOnClick: true,\n    closeWithEscape: true,\n    closeByIcon: true,\n    closeIcon: '', // Default icon VideosModal.getDefaultCloseIcon(), this needs that closeByIcon is set as true\n    loading: true,\n    loaderIcon: '', // Default icon VideosModal().getDefaultLoaderIcon(), this needs that loading is set as true\n    navigate: true,\n    leftArrow: '', // Default icon VideosModal.getDefaultLeftArrow(), this needs that navigate is set as true\n    rightArrow: '', // Default icon VideosModal.getDefaultRightArrow(), this needs that navigate is set as true\n    onlyLandscape: true, // if true, on mobile devices it should turn the video (it's adding a only-landscape class)\n    tarteAuCitron: null, // if tarteaucitron is used, put the variable into it.\n    links: '.videos-modal-link', // It is possible to set several selectors as a string.\n    videos_id: null,\n    videos_provider: 'media', // Default provider is direct media\n    videos_width: null,\n    videos_height: null,\n    videos_autoplay: 0,\n    videos_rel: 0,\n    videos_controls: 0,\n    videos_showinfo: 0,\n    videos_allowfullscreen: 0,\n    videos_title: true,\n    videos_byline: true,\n    videos_portrait: true,\n    videos_loop: false\n});\n```\n\n### Create HTML container for the modal (optional)\n\nThis is an optional container. If this not exists, it will be inserted at the end of the body.\n\n```html\n\u003cdiv id=\"videos-modal\"\u003e\u003c/div\u003e\n```\n\n### Add links for the embed videos\n\nThe `href` attribute won't be used (but is important if javascript is no enabled, or the user is using Internet Explorer. So pray for her/him). The `data-videos-modal-*` attributes overwrite the by default parameters.\n\n```html\n\u003c!-- Youtube Provider Video --\u003e\n\u003ca href=\"https://www.youtube.com/watch?v=elbgmrH06Qg\" class=\"videos-modal-link\" data-videos-modal-provider=\"youtube\"\n    data-videos-modal-id=\"elbgmrH06Qg\" data-videos-modal-autoplay=\"1\" data-videos-modal-rel=\"0\"\n    data-videos-modal-controls=\"1\" data-videos-modal-showinfo=\"1\" data-videos-modal-allowfullscreen=\"1\"\u003e\n        First link\n\u003c/a\u003e\n```\n\nTo add some video media, don't use `data-videos-modal-id` but `data-videos-modal-` + format of the video. For example `data-videos-modal-ogg` for ogg format videos. \n\n```html\n\u003c!-- Video Media without provider --\u003e\n\u003ca href=\"./media/scrabble.mp4\" class=\"play\" data-videos-modal-mp4=\"./media/scrabble.mp4\" data-videos-modal-autoplay=\"1\"\n    data-videos-modal-controls=\"1\" data-videos-modal-muted=\"0\" data-videos-modal-loop=\"0\"\u003e\n    Scrabble\n\u003c/a\u003e\n```\n\n### Add or remove links after the page is loaded\n\nIf there are new links or links are removed after the page is loaded (ajax or modified DOM), you can easily reset the script and the links list.\n\n```js\nvideosModal.reset();\n```\n\n## Compatibility\n\nThis script should work with all modern browsers (so forget IE). If you see compatibility problems please contact me.\n\n## Available providers\n\n- Dailymotion\n- Vimeo\n- Youtube\n- Youtube Playlist\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhello-motto%2Fvideos-modal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhello-motto%2Fvideos-modal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhello-motto%2Fvideos-modal/lists"}