TA-YouTube - Predefined CSS

Having a closer look at the basic example you might recognize the usage of some non Tailwind CSS class names. These classes are used to define some basics to get TA-YouTube running. The Tailwind CSS plugin generates all utilities for you so everything is done. Here is the list of all defined classes and what they are for.

Classes

ta-youtube

ta-youtube- is used to define some basic stuff and default CSS properties. Use this class on the base level of your component - the same level as your directives.

Example

<div
    class="ta-youtube ta-youtube-aspect-hd border bg-gray-800 rounded-lg shadow-xl overflow-hidden max-w-3xl"
    x-data="taYoutube()"
    x-init="init()"
    data-id="nAULsoAQn2g"
>
    <!--  CONTENT -->
</div>

ta-youtube-aspect-XXX

Used on the base level of your component - the same level as ta-youtube - you can define the aspect ratio of the video player. The Tailwind CSS plugin generates utilities for the most common aspect ratios. Here is the list of all aspect ratios you can use without adding your own.

• ta-youtube-aspect-square: 1:1,
• ta-youtube-aspect-movietone: 6:5,
• ta-youtube-aspect-large: 5:4,
• ta-youtube-aspect-tv: 4:3,
• ta-youtube-aspect-academy: 11:8,
• ta-youtube-aspect-imax: 1.43:1,
• ta-youtube-aspect-classic: 3:2,
• ta-youtube-aspect-still: 3:2,
• ta-youtube-aspect-modern: 14:9,
• ta-youtube-aspect-common: 16:10,
• ta-youtube-aspect-golden: 1.618:1,
• ta-youtube-aspect-super: 5:3,
• ta-youtube-aspect-hd: 16:9,
• ta-youtube-aspect-wide: 1.85:1,

ta-youtube-button

ta-youtube-button is used to position the play button right in the middle of your video wrapper.

ta-youtube-title

ta-youtube-title is used to make it easy to add a title above the play button.

ta-youtube-description

ta-youtube-description is used to make it easy to add a description below the play button.

ta-youtube-background

ta-youtube-background is used to make it easy to add a background image to your video wrapper component.

Example

<div
    class="ta-youtube ta-youtube-aspect-hd border bg-gray-800 rounded-lg shadow-xl overflow-hidden max-w-3xl"
    x-data="taYoutube()"
    x-init="init()"
    data-id="nAULsoAQn2g"
>
    <button
        type="button"
        href="play"
        class="absolute inset-0 w-full h-full flex items-center justify-center cursor-pointer"
        x-on:click.prevent="show()"
        x-show="!active"
    >
        <!--  BACKGROUND IMAGE -->
        <img
            class="ta-youtube-background ta-youtube-anim ta-youtube-anim-kenburns"
            src="https://picsum.photos/id/237/600/400"
            alt="Background Image"
            title="Background Image"
        />
        <!--  DARKENING GRADIENT -->
        <!--  CONTENT -->
    </button>
    <!--  YOUTUBE PLAYER -->
</div>

ta-youtube-gradient

ta-youtube-gradient is used to add a gradient to your background image. You can choose between these two predefined gradients:

• ta-youtube-gradient-light lightens up the background image
• ta-youtube-gradient-dark for a better contrast if you want to use a white text color.

If you want to use a different gradient you can add one based on the gradient utility classes of Tailwind CSS.

Example

<div
    class="ta-youtube ta-youtube-aspect-hd border bg-gray-800 rounded-lg shadow-xl overflow-hidden max-w-3xl"
    x-data="taYoutube()"
    x-init="init()"
    data-id="nAULsoAQn2g"
>
    <button
        type="button"
        href="play"
        class="absolute inset-0 w-full h-full flex items-center justify-center cursor-pointer"
        x-on:click.prevent="show()"
        x-show="!active"
    >
        <!--  BACKGROUND IMAGE -->
        <!--  DARKENING GRADIENT -->
        <div class="ta-youtube-gradient ta-youtube-gradient-dark"></div>
        <!--  CONTENT -->
    </button>
    <!--  YOUTUBE PLAYER -->
</div>

ta-youtube-anim

ta-youtube-anim is used to animate the background image. Here is a list of all available animations generated by the Tailwind CSS plugin.

• ta-youtube-anim-toright
• ta-youtube-anim-toleft
• ta-youtube-anim-rotate
• ta-youtube-anim-kenburns
• ta-youtube-anim-flight

For more information about every animation and how it looks like, check out the Animation documentation.

Example

<div
    class="ta-youtube ta-youtube-aspect-hd border bg-gray-800 rounded-lg shadow-xl overflow-hidden max-w-3xl"
    x-data="taYoutube()"
    x-init="init()"
    data-id="nAULsoAQn2g"
>
    <button
        type="button"
        href="play"
        class="absolute inset-0 w-full h-full flex items-center justify-center cursor-pointer"
        x-on:click.prevent="show()"
        x-show="!active"
    >
        <!--  BACKGROUND IMAGE -->
        <img
            class="ta-youtube-background ta-youtube-anim ta-youtube-anim-kenburns"
            src="https://picsum.photos/id/237/600/400"
            alt="Background Image"
            title="Background Image"
        />
        <!--  CONTENT -->
    </button>
    <!--  YOUTUBE PLAYER -->
    
</div>

Hide with x-cloak

If you want to hide some HTML tags before Alpine JS has done it’s magic you can use the x-cloak attribute. This attribute is removed when Alpine JS initializes. So with this information you could implement a very easy “hide-before-init” functionality without any issue. Here is a very common way to get this benefit.

/* your css styles */
[x-cloak] {
    display: none;
}

<div
    class="ta-youtube ta-youtube-aspect-hd border bg-gray-800 rounded-lg shadow-xl overflow-hidden max-w-3xl"
    x-data="taYoutube()"
    x-init="init()"
    data-id="nAULsoAQn2g"
>
    <div x-cloak>
        <!--  CONTENT TO BE HIDDEN BEFORE INIT -->
    </div>
    <!--  YOUTUBE PLAYER -->
</div>