TA-YouTube - All functions and values

Alpine JS makes it easy to use functions as expressions in every directive. Learn more about every function and value and how to set the size of your video wrapper.

Functions

The List of all functions and value TA-YouTube provides you with.

show() : Function - Starts video playback.

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"
    >
        <!--  CONTENT -->
    </button>
    <!--  VIDEO PLAYER -->
    <template x-if="active">
        <iframe
            class="absolute inset-0 w-full h-full"
            :src="url"
            frameborder="0"
            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
            allowfullscreen
        ></iframe>
    </template>
</div>

Values

TA-YouTube provides you with the following values you can use to improve the user experience.

active : Boolean - Value is true if the visitor clicked on play.

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"
    >
        <!--  CONTENT -->
    </button>
    <!--  VIDEO PLAYER -->
    <template x-if="active">
        <iframe
            class="absolute inset-0 w-full h-full"
            :src="url"
            frameborder="0"
            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
            allowfullscreen
        ></iframe>
    </template>
</div>

How to set the size of the video wrapper

Setting the size is very easy, just add your preferred aspect ratio class to the base level - the same level as ta-youtube - and boom -> 🌮.

You can find all predefined aspect ratios in the Predefined CSS documentation and if you use the Tailwind CSS plugin you can have different aspect ratios for different breakpoints.

<div
    class="ta-youtube ta-youtube-aspect-square sm:ta-youtube-aspect-tv lg:ta-youtube-aspect-hd"
    x-data="taYoutube()"
    x-init="init()"
    data-id="nAULsoAQn2g"
>
    <!--  CONTENT -->
</div>
TA Styled Plugins Logo
Explore all TA Styled Plugins and learn how to enhance your website fast and easy. All TA Styled Plugins stand for light-weight, responsive, mobile first and 100% customizable with endless animation options and are based on Tailwind CSS and Alpine JS.

TA Styled Plugins are licensed under the MIT license, see LICENSE for details.

Copyright © 2019-2021 Markus A. Wolf - www.markusantonwolf.com

Imprint | Privacy