TA-Styled-Plugins
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>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 are licensed under the MIT license, see LICENSE for details.
Copyright © 2019-2022 Markus A. Wolf - www.markusantonwolf.com