Nomnom Pumpernickle Muffins

    @markusantonwolf/ta-youtube

    2.6.0 • Public • Published

    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

    Getting started

    Examples

    Configuration

    Tailwind CSS plugin

    alpine.js Docs (V3)

    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

    Install

    npm i @markusantonwolf/ta-youtube

    DownloadsWeekly Downloads

    24

    Version

    2.6.0

    License

    MIT

    Unpacked Size

    571 kB

    Total Files

    46

    Last publish

    Collaborators

    • markusantonwolf