ta-youtube
ta-youtube copied to clipboard
A light-weight, responsive and mobile first YouTube / Vimeo video wrapper with auto playback and aspect ratio for the video player.
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
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.
# 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.
// 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 - 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
Copyright
© 2021 Markus A. Wolf https://www.markusantonwolf.com