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