Logo TA YouTube

A light-weight, responsive and mobile first YouTube video wrapper with auto playback and aspect ratio for the video player. Perfect for solving privacy issues in some countries as the YouTube player loads after the visitor presses the play button.

Flight Kenburns Move left Move right

(Choose your favorite animation style and see the magic happening.)

100% customizable and endless animation options. If you already use Tailwind CSS and Alpine JS in your project you might consider using this content, article and product pagination.

UTA-YouTube is based on Alpine JS and Tailwind CSS. 100% customizable and with endless animation options. If you already use Alpine JS and Tailwind CSS in your project you might consider using this video wrapper to avoid autoload the YouTube player and solve privacy issues. So please try TA-YoutTube and if you have some feedback - here you go.

Github Download Author Feedback

How to use TA-YouTube

The fastest way to start using Tailwind CSS and Alpine JS is from a CDN. Put the link into your head section of your html source code. Please be sure you use the "defer" attribute in your script tag. This attribute makes sure that the code gets executed right after loading.

  
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<link href="/dist/css/youtube.css" rel="stylesheet">
<link href="/dist/css/youtube-flight.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>  

Then add the TA-YouTube script source to the bottom of your body tag. You can download TA-YouTube from Github and use the files from the /dist folder. To change the animations use a different CSS file e.g. “youtube-flight.css”.

  
    <script src="/dist/js/youtube.js"></script>  

As light as possible

TA-YouTube is designed to be as light as possible so it uses CSS only for the mandatory definitions. Any design options are done with Tailwind CSS so you can adopt it to your needs very easily. Because TA-YouTube is reduced to the max you can use the code together with your own Alpine JS scripts. I recommend using Tailwind CSS and Alpine JS together with PostCSS, Webpack or Gulp so you can get the most out of the amazing Frameworks Tailwind CSS and Alpine JS.

Design only

All these CSS classes are used to design the functionality - there is NO need for mandatory classes. All important parts are defined with “x-refs” in Alpine JS. So you see, TA-YouTube is easy to use and thanks to Tailwind CSS extremely flexible.

  
    .youtube {}
.youtube--perspective {}
.youtube__button {}
.youtube__gradient {}
.youtube__title {}
.youtube__description {}
.youtube__anim {}  

The default settings

TA-YouTube uses default settings which you can overwrite easily. To explain more about the default settings I added some helpful comments.

  
    default: {
    base_url: 'https://www.youtube-nocookie.com/embed/', // base url for the iframe video player
    remember: true, // remembers if the visitor clickt on playback or not
    autoplay: false, // auto plays video if rememeberd ! not working on mobile browsers
    aspect_ratio: '1.78', // defines the aspect ratio for the video
    start_at: '', // starts video playback at that time
    end_at: '', // end video playback at that time
    button: 'button' // defines the x-ref name for the play button
},  

The way you can overwrite the default settings is simple. Just hand over your new defaults to the init function as an object. There is no need for the whole object, just add the definitions you want to change.

  
    <div
  x-data="youtube()"
  x-init="init({
    aspect_ratio: '1.66',
    autoplay: false,
  })"
>  

CSS custom properties

The height of the play buttons and the aspect ratio are defined as CSS custom properties. So you can adapt your own styling based on these properties to get a perfect user experience.

  
    .youtube {
    padding-bottom: calc(100% / var(--aspectRatio, 1.78));
}
.youtube__button {
    width: calc(100% / var(--aspectRatio, 1.78) * 0.3);
}  

Basic structure of TA-YouTube

This is the basic structure of the youtube plugin. Alpine JS is used to define the object (x-data) and init (x-init) the date. Use the youtube script form the /dist/js/youtube.js file in every project you want to. If you want to add a background image, a title or some description just add the right CSS classes and fill it.

  
    <div
    class="youtube youtube--perspective border bg-gray-800 rounded-lg shadow-xl overflow-hidden"
    x-data="youtube()"
    x-init="init('FeJKJ5MoCHY', {autoplay: true})"
>
    <a
        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 -->
        
        <!--  Play button -->
        <img
            src="/assets/img/youtube-button.svg"
            class="youtube__button transform duration-200 hover:scale-110"
            x-ref="button"
            alt="Show youtube video"
        />
        
        <!--  Title wrapper -->
        <div class="youtube__title">
            <p class="styling classes...">
                // Title
            </p>
        </div>
        
        <!--  Description wrapper -->
        <div class="youtube__description">
            <p class="styling classes...">
                // Description
            </p>
        </div>
    </a>
    
    <!--  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>  

Background image

  
    <img
    class="absolute inset-0 w-full h-full object-cover youtube__anim youtube__anim--flight z-0"
    src="https://picsum.photos/id/10/1400/700"
    alt="Background Image"
    title="Background Image"
/>  

Darkening gradient

  
    <div class="youtube__gradient youtube__gradient--dark"></div>  

Properties and functions

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

  
    // properties
active: false, // true when the visitor click on play

// functions
show() // start playback  

Links to used sources

Alpine JS is a very easy to use and extremely light-weight JS Framework. You can say it is an "reduced" Vue JS so if you love Vue JS than this might be the right choice if you don't need the whole functionality for smaller functionalities.

Tailwind CSS is a highly customizable, low-level CSS framework and it delivers in combination with PostCSS and Purge extremely small CSS files.

Picsum Photos is an awesome "Lorem Pixum" service and quite fast.

Why Tailwind CSS is my CSS framework of choice

Alpine JS – like Tailwind CSS for JavaScript

Logo TA StyledPLUGINS

TA StyledPLUGINS stands for light-weight, responsive and mobile first. All plugins are based on Tailwind CSS and Alpine JS. All are 100% customizable with endless animation options.

TA-Pagination - A content pagination solution.

TA-Gallery - An image gallery with endless animation options.

TA-YouTube - A YouTube video wrapper with auto playback, aspect ratio and privacy settings.

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

IMPRINT | PRIVACY

TA-YouTube is licensed under the MIT license, see LICENSE for details.