TA-YouTube - The Basic HTML structure

TA-YouTube is easy to customize. Learn more about the basic structure and how to adapt it to your needs.

Basic structure

This is the basic structure of TA-YouTube. Alpine JS is used to do it’s magic on your webpage. Add TA-YouTube to the x-data directive and initialize the component with the x-init directive. If you want to add a background image, a title or some description just add the right CSS classes and fill it. To learn more about the different ways of adding TA-YouTube to your website - check out How to start .

<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"
    data-remember="false"
    data-autoplay="false"
    data-start_at="200"
    data-end_at="220"
>
    <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 -->
        <div class="ta-youtube-gradient ta-youtube-gradient-dark"></div>
        <!--  Play button -->
        <div
            class="ta-youtube-button flex items-center justify-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>
        <!--  Title wrapper -->
        <div class="ta-youtube-title text-white text-5xl leading-tight font-medium px-2 sm:px-8">
            // Title
        </div>
        <!--  Description wrapper -->
        <div
            class="ta-youtube-description text-white font-semibold text-xl text-center px-2 sm:px-8"
        >
            // Description
        </div>
    </button>
    <!--  YouTube 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>

Tailwind CSS

Thanks to the Tailwind CSS everything is prepared but if you want to run it without you might have to replace the class names e.g. rounded-lg with the right CSS definition. You can find all Tailwind CSS definitions in the documentation and for my specific example rounded-lg border-radius: 0.375rem; you find a replacement here .

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