Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/markusantonwolf/ta-youtube

A light-weight, responsive and mobile first YouTube / Vimeo video wrapper with auto playback and aspect ratio for the video player.
https://github.com/markusantonwolf/ta-youtube

alpine-js alpinejs front-end front-end-development tailwind-css tailwindcss

Last synced: 25 days ago
JSON representation

A light-weight, responsive and mobile first YouTube / Vimeo video wrapper with auto playback and aspect ratio for the video player.

Host: GitHub
URL: https://github.com/markusantonwolf/ta-youtube
Owner: markusantonwolf
License: mit
Created: 2020-07-27T02:33:14.000Z (over 4 years ago)
Default Branch: master
Last Pushed: 2023-04-02T11:09:08.000Z (over 1 year ago)
Last Synced: 2024-10-09T11:23:17.106Z (about 1 month ago)
Topics: alpine-js, alpinejs, front-end, front-end-development, tailwind-css, tailwindcss
Language: JavaScript
Homepage: https://ta-styled-plugins.com/ta-youtube/
Size: 1.39 MB
Stars: 17
Watchers: 2
Forks: 1
Open Issues: 11
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# **TA-YouTube** - mobile first video wrapper with aspect ratio

**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**

## Demos, Documentation and Examples

[Documentation](https://ta-styled-plugins.com/ta-youtube/)

[Getting started](https://ta-styled-plugins.com/ta-youtube/getting-started/)

[Examples](https://ta-styled-plugins.com/ta-youtube/examples/)

[Configuration](https://ta-styled-plugins.com/ta-youtube/configuration/)

[Tailwind CSS plugin](https://ta-styled-plugins.com/ta-youtube/tailwind-css-plugin/)

[alpine.js Docs (V3)](https://alpinejs.dev/alpine-101)

## Features

- No privacy issues - User has to click before video plays
- Remembers visitor - Stores if visitor clicked to accept
- Transitions - You can use a great animated preview image
- Autoplay mode - Optional and if user already accepted
- Based on Alpine JS - Small footprint and Vue JS inspired, like Tailwind for JavaScript
- Runs with Alpine.js V2 and Alpine.js V3
- 100% Tailwind CSS - Rapidly build modern websites without leaving your HTML

## Install

**From npm:** Install the package.

```bash

# Install using npm

npm install --save-dev @markusantonwolf/ta-gallery

# Install using yarn

yarn add -D @markusantonwolf/ta-gallery
```

**Inside tailwind.config.js:** Add the plugin to your tailwind css config file.

```js
// tailwind.config.js

const ta_youtube_safelist = require('./node_modules/@markusantonwolf/ta-youtube/src/plugin/safelist')

module.exports = {
purge: {
// ...
options: {
safelist: [...ta_youtube_safelist],
},
// ...
},
// ...
theme: {
// ...
taYoutube: {
debug: false, // shows the new component classes in the console while building
export: false, // writes the new component classes into files ./public/utilities.css & /public/keyframes.css
},
// ...
},
variants: {
// ...
taYoutube: ['responsive'], // empty the array if you don't need a responsive variant
// ...
},
// ...
plugins: [
require('@markusantonwolf/ta-youtube')({
respectPrefix: true, // respect prefix option in config: true (default) | false
respectImportant: true, // respect important option in config: true (default) | false
}),
],
}
```

## More TA-Styled-Plugins

- [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.

## Local development

```
// To install dev dependencies run:

npm install

// To start the development server run and go to http://localhost:8888/:

npm run serve

// To make a development build run:

npm run develop

// To make a production build run:

npm run build
```