TA-YouTube - 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: {
    id: '', // id of the video e.g. 3Ay4Sk7NRCY
    source: 'youtube', // change the data source for the video: youtube | vimeo
    remember: true, // remembers if the visitor clickt on playback or not: true | false
    autoplay: false, // auto plays video if rememeberd ! not working on mobile browsers: true | false
    aspect_ratio: '1.78', // defines the aspect ratio for the video
    start_at: '', // starts video playback at that second
    end_at: '', // end video playback at that second
    button: 'button' // defines the x-ref name for the play button
},

Overwrite with data attribute

Sometimes it can be easier to read / write if you use data attributes. Since version 2.X you can use the alternative approach and use data attributes to define all options.

<div
    x-data="taYoutube()"
    x-init="init()"
    data-id="3Ay4Sk7NRCY"
    data-remember="true"
    data-autoplay="true"
    data-start_at="200"
    data-end_at="220"
>
    <!-- CONTENT -->
</div>

Overwrite as object

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="taYoutube()"
    x-init="init('3Ay4Sk7NRCY'{
        aspect_ratio: '1.66',
        autoplay: false,
    })"
>
check
With Alpine.js V3 there is no need for a seperated init call. I recommend using the data attribute approach.

CSS custom properties

Both, the height of the play button and the aspect ratio are defined as CSS custom properties. You can adapt your own styling based on these properties to get a perfect user experience.

.ta-youtube {
    padding-bottom: calc(100% / var(--ta-youtube-aspect-ratio, 1.78));
}
.ta-youtube-button {
    width: calc(100% / var(--ta-youtube-aspect-ratio, 1.78) * 0.3);
}
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-2021 Markus A. Wolf - www.markusantonwolf.com

Imprint | Privacy