TA-YouTube - Getting started

TA-YouTube gives you at least two ways to wrap your YouTube or Vimeo video. Learn more about it and the prefered way to use it.

The best way: Tailwind CSS Plugin

Since version 2.X you can find TA-Youtube as an installable package on NPM: TA-YouTube .

From npm: Install the package.

# Install using npm

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

# Install using yarn

yarn add -D @markusantonwolf/ta-youtube

Inside tailwind.config.js: Add the plugin to your Tailwind CSS config file.

// tailwind.config.js
module.exports = {
    // ...
    plugins: [
        require('@markusantonwolf/ta-youtube')
    ]
}

You can find the TA-Gallery javascript source file in ./node_modules/@markusantonwolf/ta-youtube/src/scripts/ta-youtube.js so you can copy it into your own script folder or include the path into your build process. If you want to include the compiled and minified version use this one: ./node_modules/@markusantonwolf/ta-youtube/dist/js/ta-youtube.min.js.

Purge CSS with Tailwind CSS

If you use Purge CSS to optimize your CSS files you have to add the following class names to your whitelist / safelist.

// tailwind.config.js

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

module.exports = {
    purge: {
        // ...
        options: {
            safelist: [...ta_youtube_safelist],
        },
        // ...
    },
    // ...
}

For more information about the TA-YouTube Tailwind CSS plugin and how it works, check out the Plugin documentation.

The function taYoutube is added to the window object. This solves a major issue with webpack, gulp or other bundler tools. Read more about this issue here .

The fastest way: Not for production

To start the fastest way using Tailwind CSS and Alpine JS is from a CDN. Put the following code into your html source code. Please be sure you use the “defer” attribute in your script tag. This attribute makes sure that the code gets executed right after loading. To change the animations use a different CSS file e.g. “ta-youtube-flight.css”.

Alpine.js V3

<!-- into <head> -->
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<script src="//unpkg.com/alpinejs" defer></script>
<link href="https://cdn.jsdelivr.net/gh/markusantonwolf/ta-youtube@2.x.x/dist/css/ta-youtube.css" rel="stylesheet">

<!-- at the end of <body> -->
<script src="https://cdn.jsdelivr.net/gh/markusantonwolf/ta-youtube@2.x.x/dist/js/ta-youtube.min.js"></script>

Alpine.js V2

<!-- into <head> -->
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
<link href="https://cdn.jsdelivr.net/gh/markusantonwolf/ta-youtube@2.x.x/dist/css/ta-youtube.css" rel="stylesheet">

<!-- at the end of <body> -->
<script src="https://cdn.jsdelivr.net/gh/markusantonwolf/ta-youtube@2.x.x/dist/js/ta-youtube.min.js"></script>

CodePen example

To start even faster you can use the CodePen example of TA-YouTube and play around with it. This example uses the latest version of the CDN scripts and styles.

CodePen

Tailwind CSS

I strongly recommend using Tailwind CSS and Purge CSS in your build process. Adding TA-YouTube to your Tailwind CSS configuration is very easy.

The TA-YouTube Tailwind CSS plugin generates all utilities for you. If you don’t want to use the plugin you can use the pre-rendered and minified CSS utilities from the /dist folder or via CDN.

Previous Introduction Next Examples

Last updated

17. May 2022

Reading Time

~ 3 minutes

Contents