TA-YouTube - mobile first video component with aspect ratio

A light-weight, responsive and mobile first YouTube / Vimeo video wrapper component with auto playback and aspect ratio for the video player.
Iā€™m a big fan of Gabriel Iglesias so if you never heard of him, just check out his YouTube channel or watch his shows on Netflix.
Tested and supports Alpine.js V3 and V2

TA-YouTube component 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-YouTube and if you have some feedback - leave me a message: @markusantonwolf / Twitter.

Perfect for solving privacy issues!


No privacy issues
No privacy issues - User has to click before video plays
Remembers visitor
Remembers visitor - Stores if visitor clicked to accept
Transitions - You can use a great animated preview image
Autoplay mode
Autoplay mode - Optional and if user already accepted
Alpine JS logo
Based on Alpine JS - Small footprint and Vue JS inspired, like Tailwind for JavaScript
Tailwind CSS logo
100% Tailwind CSS - Rapidly build modern websites without leaving your HTML

See TA-Youtube in action

If you are using TA-Analytics in the wild and want to see it in the following list just send me a DM on Twitter @markusantonwolf or mention me in a tweet.

As light as possible

TA-YouTube is designed to be as light as possible so it uses CSS only for the mandatory definitions. All 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.

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