TA-YouTube - Examples

With TA-YouTube you can use your own preview images no matter if you want to use a YouTube or Vimeo video. Enjoy some examples..

Define start and end time

You can change the default start_at and end_at values by adding your own definition into the init() function call or as data attributes to the ta-youtube element.

Photo by Pedro Monteiro on Unsplash

<div
    class="ta-youtube ta-youtube-aspect-hd ..."
    x-data="taYoutube()"
    x-init="init()"
    data-id="3Ay4Sk7NRCY"
    data-remember="true"
    data-autoplay="true"
    data-start_at="200"
    data-end_at="220"
>
    <!-- CONTENT -->
</div>

Change playback button

You can change the button very easily. The size of the button is defined in the ta-youtube-button class. Learn more about all Predefined Classes .

Photo by Pedro Monteiro on Unsplash

<div
    type="button"
    class="ta-youtube-button flex-center text-white transform duration-200 hover:scale-110"
    x-ref="button"
    alt="Show youtube video"
>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="fill-current w-full"><title>play-circle</title><path d="M371.7 238l-176-107c-15.8-8.8-35.7 2.5-35.7 21v208c0 18.4 19.8 29.8 35.7 21l176-101c16.4-9.1 16.4-32.8.0-42zM504 256C504 119 393 8 256 8S8 119 8 256s111 248 248 248 248-111 248-248zm-448 0c0-110.5 89.5-2e2 2e2-2e2s2e2 89.5 2e2 2e2-89.5 2e2-2e2 2e2S56 366.5 56 256z"></path></svg>
</div>

Vimeo

If you want to use Vimeo as your data source you have to change source: 'vimeo' by adding it as your own definition to the init function or use data attributes to define data-source="vimeo".

<div
    class="ta-youtube ta-youtube-aspect-hd ..."
    x-data="taYoutube()"
    x-init="init()"
    data-id="22521543"
    data-source="vimeo"
>
    <!-- CONTENT -->
</div>

Height by aspect ratio

This example uses a fixed aspect ratio of 16:9 ta-youtube-aspect-hd. Most common ratios are predefined by the Tailwind CSS plugin. Learn more about how to set the size of TA-YouTube in the Predefined CSS and Functions documentation.

If you don’t want to use the aspect ratio classes you can define the aspect ratio with a data attribute.

<div
    class="ta-youtube ..."
    x-data="taYoutube()"
    x-init="init()"
    data-id="3Ay4Sk7NRCY"
    data-remember="false"
    data-aspect_ratio="1.78"
>
    <!-- CONTENT -->
</div>

Don’t remember if the visitor clicked on play

You can change the default value to remember: false by adding it as your own definition to the init function or use data attributes to define data-remember="false".

<div
    class="ta-youtube ta-youtube-aspect-hd ..."
    x-data="taYoutube()"
    x-init="init()"
    data-id="3Ay4Sk7NRCY"
    data-remember="false"
>
    <!-- CONTENT -->
</div>

Different gradient

You can change the styling of your gradient easily. The gradient is defined in the ta-youtube-gradient-dark or ta-youtube-gradient-dark class. So replace this class with your own styled gradient e.g. my-own-gradient.

<div class="ta-youtube-gradient my-own-gradient"></div>

.my-own-gradient {
    background: linear-gradient(
        135deg,
        rgba(131, 58, 180, 0.2) 0%,
        rgba(253, 29, 29, 0.2) 50%,
        rgba(252, 176, 69, 0.2) 100%
    );
}

Previous Getting started Next Basic Structure

Last updated

17. May 2022

Reading Time

~ 3 minutes

Contents