TA-YouTube - mobile first video component with aspect ratio

Fluffy Loves India

Comedian: Mexican, Audience: America, Viewers: Indian - Fluffy is the only guy who can connect 3 countries in 21 minutes 😂

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.

Features

No privacy issues - User has to click before video plays

Remembers visitor - Stores if visitor clicked to accept

Transitions - You can use a great animated preview image

Autoplay mode - Optional and if user already accepted

Based on Alpine JS - Small footprint and Vue JS inspired, like Tailwind for JavaScript

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.

• Tailwind CSS - my CSS framework of choice ,

• Alpine JS – like Tailwind CSS for JavaScript

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.