Hyvä themes have revolutionized Magento frontends with their lightweight and high-performance design. In this guide, we’ll build a fully interactive video component in Hyvä Themes using Alpine.js and Tailwind CSS. This approach enhances user engagement while keeping the UI modern and responsive.

Why Use Alpine.js and Tailwind CSS for Hyvä?

• Minimal JavaScript Overhead – Alpine.js keeps interactions lightweight.
• Tailwind’s Utility Classes – Makes styling intuitive and flexible.
• Improved UX – Click-to-play functionality improves engagement.

Building the Hyvä Video Component

Here’s how to create an interactive video playback component in Hyvä themes.

1. HTML Structure

<div class="md:w-1/2 w-full flex items-center justify-center"
     x-data="{ vplayEnabled: false }">
    <div class="max-w-[650px] h-full overflow-hidden relative"
         @click="vplayEnabled = !vplayEnabled; if (vplayEnabled) { $refs.video.play(); } else { $refs.video.pause(); $refs.video.currentTime = 0; }">
        <video x-ref="video" x-bind:class="{ 'hidden': !vplayEnabled }" class="object-cover w-full h-full"
               src="<?= $escaper->escapeHtmlAttr($mediaUrl . 'video-file.mp4') ?>"
               type="video/mp4"
               poster="<?= $escaper->escapeHtmlAttr($mediaUrl . 'hyva/designers/video-poster.png') ?>"> 
        </video>
        <img x-show="!vplayEnabled"
             src="<?= $escaper->escapeHtmlAttr($mediaUrl . 'fallback-image.png') ?>"
             class="w-full h-full object-cover cursor-pointer" style="width:750px;">
        <img class="video-icon absolute center" src="<?= $block->getViewFileUrl('play-icon.png') ?>"
             alt="Play Video" class="w-8 h-8 md:h-6 md:w-6 hover:text-black">
    </div>
</div>

2. Breakdown of the Code

• x-data="{ playEnabled: false }" – Alpine.js reactive state management.
• x-ref="video" – References the video element for JavaScript interactions.
• Click event (@click) – Toggles play/pause on click.
• Tailwind CSS – Ensures responsiveness and modern styling.

Conclusion

By leveraging Alpine.js and Tailwind CSS, we built an interactive video component for Hyvä themes. This approach ensures a fast, engaging, and visually appealing user experience.

Build a Custom Hyvä Static Slider using Tailwind CSS and Alpine.js