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 .

    class="ta-youtube ta-youtube-aspect-hd border bg-gray-800 rounded-lg shadow-xl overflow-hidden max-w-3xl"
        class="absolute inset-0 w-full h-full flex items-center justify-center cursor-pointer"
        <!--  Background image -->
            class="ta-youtube-background ta-youtube-anim ta-youtube-anim-kenburns"
            alt="Background Image"
            title="Background Image"
        <!--  Darkening gradient -->
        <div class="ta-youtube-gradient ta-youtube-gradient-dark"></div>
        <!--  Play button -->
            class="ta-youtube-button flex items-center justify-center text-white transform duration-200 hover:scale-110"
            alt="Show youtube video"
                viewBox="0 0 512 512"
                class="fill-current w-full"
                    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"
        <!--  Title wrapper -->
        <div class="ta-youtube-title text-white text-5xl leading-tight font-medium px-2 sm:px-8">
            // Title
        <!--  Description wrapper -->
            class="ta-youtube-description text-white font-semibold text-xl text-center px-2 sm:px-8"
            // Description
    <!--  YouTube player -->
    <template x-if="active">
            class="absolute inset-0 w-full h-full"
            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"

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-2022 Markus A. Wolf - www.markusantonwolf.com

Imprint | Privacy