TA-Styled-Plugins
The List of all functions and value TA-YouTube provides you with.
show() : Function - Starts video playback.
Example
<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"
>
<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"
>
<!-- CONTENT -->
</button>
<!-- VIDEO 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>TA-YouTube provides you with the following values you can use to improve the user experience.
active : Boolean - Value is true if the visitor clicked on play.
Example
<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"
>
<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"
>
<!-- CONTENT -->
</button>
<!-- VIDEO 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>Setting the size is very easy, just add your preferred aspect ratio class to the base level - the same level as ta-youtube - and boom -> 🌮.
You can find all predefined aspect ratios in the Predefined CSS documentation and if you use the Tailwind CSS plugin you can have different aspect ratios for different breakpoints.
<div
class="ta-youtube ta-youtube-aspect-square sm:ta-youtube-aspect-tv lg:ta-youtube-aspect-hd"
x-data="taYoutube()"
x-init="init()"
data-id="nAULsoAQn2g"
>
<!-- CONTENT -->
</div>
TA Styled Plugins are licensed under the MIT license, see LICENSE for details.
Copyright © 2019-2022 Markus A. Wolf - www.markusantonwolf.com