Live Demo / Download
—
Modal video components are increasingly used in modern web design because they allow for quickly watching a video without leaving the page and focusing on the content without too many distractions. We have implemented this type of component in many of our templates (for example, in Open Pro, a SaaS website template, and Simple, a simple website template), and we can guarantee that our customers have greatly appreciated their use.
As you may have guessed, in this tutorial, we will learn how to create a modal video component using two powerful front-end tools: Tailwind CSS and Alpine.js. By combining the power of Tailwind CSS and Alpine.js, we can create a sleek and functional modal video component for every type of web application. Are you ready? Let’s get started!
Assuming you haven’t set up your environment yet, let’s create a simple HTML page and import Tailwind CSS and Alpine.js via the CDN. Although this is not the recommended approach for production websites, it’s okay for our experiment.
lang="en">
charset="utf-8">
Modal Video
name="viewport" content="width=device-width,initial-scale=1">
rel="preconnect" href="https://fonts.googleapis.com">
rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap" rel="stylesheet">
tailwind.config = {
theme: {
extend: {
fontFamily: {
inter: ['Inter', 'sans-serif'],
},
},
},
};
class="font-inter antialiased h-screen px-6 py-6 md:py-8">
class="h-full flex flex-col justify-center">
class="my-6">
class="w-full max-w-6xl mx-auto">
class="flex justify-center">
Create the modal video structure with HTML and Tailwind CSS
The first step is to create the HTML structure for the modal video using Tailwind CSS classes to style the elements. This includes the following:
- The button: This is the clickable element that triggers the opening of the modal. The button contains a thumbnail image of the video and a play button icon. We have also added ARIA attributes for accessibility.
- The backdrop layer: This is the dark background that appears behind the modal when it is open. It covers the entire screen and is partially transparent to allow the background to be visible.
- The modal video: This is the actual video that plays in the modal. It is positioned in the center of the screen.
class="fixed inset-0 z-[99999] bg-black bg-opacity-50 transition-opacity">
id="modal" class="fixed inset-0 z-[99999] flex p-6" role="dialog" aria-modal="true">
class="max-w-5xl mx-auto h-full flex items-center">
class="w-full max-h-full rounded-3xl shadow-2xl aspect-video bg-black overflow-hidden">
Define the modal initial state with Alpine.js
The next step is to define the initial state of the modal using Alpine.js. This involves creating an x-data
attribute on a parent element and assigning it an object with properties that represent the state of the modal.
In this case, we want to create a property called modalOpen
with an initial value of false
. This sets the initial state of the modal to be closed, and allows us to toggle its state later.
x-data="{ modalOpen: false }">
Then, we need to bind the visibility of the modal and its backdrop to the modalOpen
state. We use the x-show
directive on both the backdrop and the modal to tell Alpine when to show or hide these elements based on the modalOpen
state. So, we hide them when the state is false and show them when it’s true.
x-data="{ modalOpen: false }">