{"id":13759271,"url":"https://github.com/markusantonwolf/ta-youtube","last_synced_at":"2025-10-07T14:09:49.782Z","repository":{"id":42736408,"uuid":"282775915","full_name":"markusantonwolf/ta-youtube","owner":"markusantonwolf","description":"A light-weight, responsive and mobile first YouTube / Vimeo video wrapper with auto playback and aspect ratio for the video player.","archived":false,"fork":false,"pushed_at":"2023-04-02T11:09:08.000Z","size":1454,"stargazers_count":17,"open_issues_count":11,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-05T04:14:32.987Z","etag":null,"topics":["alpine-js","alpinejs","front-end","front-end-development","tailwind-css","tailwindcss"],"latest_commit_sha":null,"homepage":"https://ta-styled-plugins.com/ta-youtube/","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/markusantonwolf.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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-07-27T02:33:14.000Z","updated_at":"2023-04-02T11:07:01.000Z","dependencies_parsed_at":"2024-08-03T13:13:10.871Z","dependency_job_id":null,"html_url":"https://github.com/markusantonwolf/ta-youtube","commit_stats":{"total_commits":56,"total_committers":3,"mean_commits":"18.666666666666668","dds":0.0535714285714286,"last_synced_commit":"d8dfc5fe0db76ce937246e0ec513e3c921801252"},"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markusantonwolf%2Fta-youtube","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markusantonwolf%2Fta-youtube/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markusantonwolf%2Fta-youtube/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markusantonwolf%2Fta-youtube/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/markusantonwolf","download_url":"https://codeload.github.com/markusantonwolf/ta-youtube/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248868369,"owners_count":21174750,"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":["alpine-js","alpinejs","front-end","front-end-development","tailwind-css","tailwindcss"],"created_at":"2024-08-03T13:00:49.954Z","updated_at":"2025-10-07T14:09:44.732Z","avatar_url":"https://github.com/markusantonwolf.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/markusantonwolf/ta-youtube/raw/master/public/img/logo-ta-youtube.png\" width=\"400px\" /\u003e\n\u003c/p\u003e\n\n# **TA-YouTube** - mobile first video wrapper with aspect ratio\n\n**A light-weight, responsive and mobile first YouTube / Vimeo video wrapper with auto playback and aspect ratio for the video player. Runs with Alpine.js V2 and Alpine.js V3**\n\n## Demos, Documentation and Examples\n\n[Documentation](https://ta-styled-plugins.com/ta-youtube/)\n\n[Getting started](https://ta-styled-plugins.com/ta-youtube/getting-started/)\n\n[Examples](https://ta-styled-plugins.com/ta-youtube/examples/)\n\n[Configuration](https://ta-styled-plugins.com/ta-youtube/configuration/)\n\n[Tailwind CSS plugin](https://ta-styled-plugins.com/ta-youtube/tailwind-css-plugin/)\n\n[alpine.js Docs (V3)](https://alpinejs.dev/alpine-101)\n\n## Features\n\n-   No privacy issues - User has to click before video plays\n-   Remembers visitor - Stores if visitor clicked to accept\n-   Transitions - You can use a great animated preview image\n-   Autoplay mode - Optional and if user already accepted\n-   Based on Alpine JS - Small footprint and Vue JS inspired, like Tailwind for JavaScript\n-   Runs with Alpine.js V2 and Alpine.js V3\n-   100% Tailwind CSS - Rapidly build modern websites without leaving your HTML\n\n## Install\n\n**From npm:** Install the package.\n\n```bash\n\n# Install using npm\n\nnpm install --save-dev @markusantonwolf/ta-gallery\n\n# Install using yarn\n\nyarn add -D @markusantonwolf/ta-gallery\n```\n\n**Inside tailwind.config.js:** Add the plugin to your tailwind css config file.\n\n```js\n// tailwind.config.js\n\nconst ta_youtube_safelist = require('./node_modules/@markusantonwolf/ta-youtube/src/plugin/safelist')\n\nmodule.exports = {\n    purge: {\n        // ...\n        options: {\n            safelist: [...ta_youtube_safelist],\n        },\n        // ...\n    },\n    // ...\n    theme: {\n        // ...\n        taYoutube: {\n            debug: false, // shows the new component classes in the console while building\n            export: false, // writes the new component classes into files ./public/utilities.css \u0026 /public/keyframes.css\n        },\n        // ...\n    },\n    variants: {\n        // ...\n        taYoutube: ['responsive'], // empty the array if you don't need a responsive variant\n        // ...\n    },\n    // ...\n    plugins: [\n        require('@markusantonwolf/ta-youtube')({\n            respectPrefix: true, // respect prefix option in config: true (default) | false\n            respectImportant: true, // respect important option in config: true (default) | false\n        }),\n    ],\n}\n```\n\n## More TA-Styled-Plugins\n\n-   [TA-Styled-Plugins](https://ta-styled-plugins.com/) - Explore all Tailwind CSS and Alpine JS styled plugins and learn how to enhance your website fast and easy.\n\n## Local development\n\n```\n// To install dev dependencies run:\n\nnpm install\n\n// To start the development server run and go to http://localhost:8888/:\n\nnpm run serve\n\n// To make a development build run:\n\nnpm run develop\n\n// To make a production build run:\n\nnpm run build\n```\n\n## Copyright\n\n© 2021 Markus A. Wolf\n\u003chttps://www.markusantonwolf.com\u003e\n\n\u003cp\u003e\n\u003cimg src=\"./public/img/logo-ta-styled-plugins.png\" width=\"160px\" style=\"display:block;padding-top:4rem;\" /\u003e\n\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarkusantonwolf%2Fta-youtube","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarkusantonwolf%2Fta-youtube","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarkusantonwolf%2Fta-youtube/lists"}