In today’s digital world, website design plays a crucial role in creating a positive user experience. WordPress (WP), one of the most popular content management systems (CMS), allows users to create visually appealing websites with ease. One of the most effective design elements that enhances a website’s visual appeal is the image slider. A WP slider enables users to display multiple images or content in a slideshow format, making the website interactive and dynamic.

Among various ways to build a slider, using Bootstrap – a front-end framework that simplifies the process of creating responsive websites – stands out. Bootstrap offers a range of pre-designed components, one of which is the carousel slider, ideal for showcasing images or content on a website.

In this article, we will explore how to create a WP slider with three images using Bootstrap. We will guide you through the entire process, from integrating Bootstrap into WordPress to customizing the slider to fit your website’s style. Whether you’re a beginner or an experienced developer, this guide will help you build a responsive and user-friendly slider that enhances your website’s overall design.

By the end of this article, you will be equipped with the knowledge to create a sleek, professional slider with minimal effort, offering a polished experience for your site visitors.

1. What is a WordPress Slider?

A WordPress slider is an interactive element that displays multiple images or pieces of content in a rotating, slide-like fashion on a webpage. Sliders are used to showcase visual content such as images, text, videos, or product features in a dynamic and engaging way. These sliders automatically or manually transition between different slides, offering an appealing and functional solution for highlighting key information or media on a website.

WordPress sliders come in many different formats, but they all share the same fundamental purpose: to present a series of images or content in a compact, organized manner. They are most commonly used for:

• Featured images or product showcases: Perfect for highlighting top products or services on a homepage.
• Banners and promotions: Great for showcasing deals, announcements, or special offers.
• Portfolio displays: Ideal for creative professionals to showcase their work.
• Image galleries: Useful for displaying multiple images in a visually attractive way without cluttering the page.

The responsive nature of sliders is one of their most significant advantages. In today’s mobile-first world, it’s essential for website elements to adjust seamlessly to different screen sizes, and sliders are no exception. A responsive slider adapts to the size of the viewer’s screen—whether it’s a desktop, tablet, or mobile device—ensuring that the content looks great on any device.

However, while WordPress provides a variety of slider plugins, creating your own custom slider with tools like Bootstrap can provide greater flexibility, control, and a smoother integration with your website design.

2. Why Use Bootstrap for Creating a WP Slider?

Bootstrap is a popular open-source front-end framework that helps developers design responsive and mobile-first websites quickly. It provides a comprehensive set of pre-designed components, such as navigation bars, buttons, forms, and carousels (sliders), making it an ideal choice for building elements like a WordPress slider with minimal effort.

Here are several reasons why Bootstrap is a great choice for creating a WP slider:

1. Responsive Design

Bootstrap is built with a focus on mobile-first and responsive design, which means it automatically adjusts elements to fit various screen sizes. When you use Bootstrap to create a WP slider, you can be sure that it will function flawlessly on all devices—desktops, tablets, and smartphones—without additional custom code for responsiveness.

Incorporating a responsive slider ensures that your website provides a seamless user experience across all devices, improving user engagement and reducing bounce rates.

2. Pre-built Carousel Component

Bootstrap comes with a carousel component, which is a flexible, customizable slider with built-in features like automatic sliding, next/previous navigation, and indicators. This carousel functionality makes it easier to create a WP slider without needing to build the entire structure from scratch.

By using Bootstrap’s carousel component, you can focus on customizing the slider’s appearance and content, while Bootstrap handles the more technical aspects of creating a smooth, functional slider.

3. Ease of Customization

Bootstrap allows for easy customization, meaning you can tailor the WP slider to match your website’s design. Whether it’s changing the size of the images, adjusting the transition speed, or modifying the slider’s navigation buttons, Bootstrap offers flexible options that can be easily modified through simple CSS tweaks.

With Bootstrap, developers can quickly integrate custom styles, animations, or additional features like captions or links to create a unique and visually appealing slider that fits seamlessly with their site’s theme.

4. Cross-browser Compatibility

Bootstrap ensures that your WP slider works across all modern browsers (Google Chrome, Firefox, Safari, Edge) without any compatibility issues. It handles browser inconsistencies by providing standardized components that display consistently across different platforms. This is important for maintaining a professional and polished appearance for all users, regardless of their browser choice.

5. Minimal Code, Maximum Impact

Bootstrap enables you to create a sophisticated WP slider with minimal code. With the help of the carousel component, you don’t need to write a lot of JavaScript or CSS to get a functional slider up and running. This makes it an excellent option for both beginner and advanced developers who want to achieve impressive results without writing complex code.

Using Bootstrap in conjunction with WordPress allows you to leverage this streamlined approach while maintaining the flexibility to add customizations as needed.

6. Active Community and Documentation

One of the most significant advantages of using Bootstrap is its active community and extensive documentation. If you run into any issues while integrating or customizing your WP slider, you can find detailed guides, tutorials, and support from a large network of developers. This can save time and help you troubleshoot any problems more efficiently.

3. Setting Up Bootstrap for WordPress

Before you can start creating a WP slider with three images using Bootstrap, you’ll need to integrate Bootstrap into your WordPress website. Thankfully, this process is simple and can be done either manually by adding the necessary Bootstrap files to your theme or by using a plugin. Here’s a step-by-step guide to help you set up Bootstrap in your WordPress theme.

Step 1: Install Bootstrap in WordPress

There are two primary methods for integrating Bootstrap into your WordPress website:

Method 1: Manually Adding Bootstrap Files

Download Bootstrap:

• Go to the official Bootstrap website and download the latest version of Bootstrap.
• You’ll receive a zip file containing the CSS, JavaScript, and font files needed for Bootstrap.

Add Bootstrap Files to Your Theme:

• Once you’ve downloaded the files, extract the contents of the zip file.
• Upload the bootstrap.min.css and bootstrap.min.js files to your WordPress theme directory (usually located in wp-content/themes/your-theme-name/).
• Place the CSS file in the /css folder and the JS file in the /js folder.

Enqueue Bootstrap Files:

• Open your theme’s functions.php file and add the following code to enqueue Bootstrap:

   function enqueue_bootstrap() {
       wp_enqueue_style( 'bootstrap-css', get_template_directory_uri() . '/css/bootstrap.min.css' );
       wp_enqueue_script( 'bootstrap-js', get_template_directory_uri() . '/js/bootstrap.min.js', array('jquery'), '', true );
   }
   add_action( 'wp_enqueue_scripts', 'enqueue_bootstrap' );

This code tells WordPress to load the Bootstrap CSS and JS files on your site.

Method 2: Using a Plugin

• If you prefer a quicker and easier solution, you can install a WordPress plugin that automatically adds Bootstrap to your site.
• Plugins like Bootstrap for Contact Form 7 or Bootstrap Shortcodes add Bootstrap functionality without needing to manually upload files.
• Simply search for “Bootstrap” in the WordPress plugin repository, install the plugin, and activate it.

Step 2: Check Bootstrap Integration

Once you’ve added Bootstrap to your theme (either manually or using a plugin), it’s time to check if everything is working properly.

• Open your WordPress website in a browser and view the page source (right-click on the page and click View Page Source).
• Look for references to bootstrap.min.css and bootstrap.min.js in the <head> and <footer> sections. If you see them, it means Bootstrap has been successfully integrated.

Step 3: Test the Carousel Component

Before proceeding to create your WP slider, you can test the Bootstrap carousel component to ensure that it’s functioning properly.

• Create a simple HTML structure using the following Bootstrap carousel code in one of your WordPress posts or a custom page template:

<div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="image1.jpg" class="d-block w-100" alt="First Image">
    </div>
    <div class="carousel-item">
      <img src="image2.jpg" class="d-block w-100" alt="Second Image">
    </div>
    <div class="carousel-item">
      <img src="image3.jpg" class="d-block w-100" alt="Third Image">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

• Replace image1.jpg, image2.jpg, and image3.jpg with the actual URLs of your images.
• Preview the page, and you should see the basic Bootstrap carousel slider displaying your images. If this works, you’re all set to move on to customizing your WP slider with three images.

Troubleshooting Common Issues

• Carousel not functioning: Ensure that both the Bootstrap CSS and JS files are correctly enqueued in the functions.php file. If you’re using a plugin, check that it is activated and configured properly.
• Images not displaying: Double-check the image file paths and make sure that they are correctly entered in the <img> tag.
• Slider not responsive: Bootstrap’s carousel component is mobile-first by default, so ensure you’re not overriding any responsive CSS rules in your theme that may be affecting the slider.

Once you have successfully set up Bootstrap and tested the carousel component, you’re ready to start creating a fully functional and customized WP slider with three images.

In the next section, we’ll walk you through the process of creating a WP slider with three images using Bootstrap, including the HTML structure, customizing the slider, and ensuring its responsiveness across devices.

4. Creating a WP Slider with Three Images Using Bootstrap

Now that you have successfully set up Bootstrap in your WordPress theme, it’s time to create a simple and functional WP slider with three images using Bootstrap’s carousel component. This section will guide you through the step-by-step process to integrate and customize the carousel slider for your WordPress site.

Step 1: Basic HTML Structure for the Bootstrap Carousel

The first step is to create the basic structure for your WP slider. This involves writing HTML code to define the carousel and how it will display the images. Here’s an example of how to structure the carousel with three images:

<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <!-- First Image -->
    <div class="carousel-item active">
      <img src="path/to/image1.jpg" class="d-block w-100" alt="Image 1">
    </div>

    <!-- Second Image -->
    <div class="carousel-item">
      <img src="path/to/image2.jpg" class="d-block w-100" alt="Image 2">
    </div>

    <!-- Third Image -->
    <div class="carousel-item">
      <img src="path/to/image3.jpg" class="d-block w-100" alt="Image 3">
    </div>
  </div>

  <!-- Carousel Controls -->
  <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Explanation of the Code:

• <div id="myCarousel" class="carousel slide" data-bs-ride="carousel">: This is the container for the carousel. The id="myCarousel" is used to uniquely identify the slider, and the data-bs-ride="carousel" attribute tells Bootstrap to automatically start the carousel when the page loads.
• <div class="carousel-inner">: This is the wrapper for all the carousel items (the individual slides). Each image slide is wrapped inside a <div class="carousel-item">.
• <div class="carousel-item active">: The active class on the first item makes it the default starting image when the page loads.
• Carousel Controls: The next and previous buttons are defined using the <button> tags. These allow users to manually cycle through the slides. The data-bs-slide="prev" and data-bs-slide="next" attributes specify the navigation direction.

Step 2: Adding the Three Images

To add your three images to the slider, replace the src="path/to/imageX.jpg" placeholders with the actual paths to your images. You can upload your images to the WordPress media library and copy the URLs, or you can use relative paths if the images are hosted in your theme or custom directories.

For example:

<div class="carousel-item active">
  <img src="https://example.com/wp-content/uploads/2024/11/image1.jpg" class="d-block w-100" alt="Image 1">
</div>

Repeat this process for the second and third images.

Step 3: Customizing the Carousel Navigation

By default, Bootstrap adds navigation controls to move between slides, such as “Previous” and “Next” buttons. You can customize these buttons to better match your website’s design by adding CSS. You may choose to change their colors, size, or even the icons.

For example, you can add the following CSS to your theme’s style.css to change the appearance of the navigation buttons:

.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: #007bff; /* Change button color */
    border-radius: 50%; /* Make buttons round */
    height: 40px; /* Set the size */
    width: 40px;  /* Set the size */
}

.carousel-control-prev-icon:hover,
.carousel-control-next-icon:hover {
    background-color: #0056b3; /* Hover effect */
}

Step 4: Adding Indicators (Optional)

Bootstrap’s carousel also includes the option to add indicators, which are small circles below the slider that allow users to directly jump to a specific image. To add indicators to your carousel, include the following code within the <div class="carousel-inner"> section:

<ol class="carousel-indicators">
  <li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li>
  <li data-bs-target="#myCarousel" data-bs-slide-to="1"></li>
  <li data-bs-target="#myCarousel" data-bs-slide-to="2"></li>
</ol>

Each <li> element represents a slide, and the data-bs-slide-to attribute indicates which slide the indicator will link to. The class="active" should be added to the first indicator, which will be highlighted by default.

Step 5: Ensuring Responsiveness

Since Bootstrap’s carousel is designed to be responsive by default, it will automatically adjust to different screen sizes. However, you may want to fine-tune the responsiveness to ensure the images look great on all devices. You can adjust the image sizes using CSS:

.carousel-item img {
    width: 100%;
    height: auto;
}

This ensures that the images scale to fit the width of the carousel, while maintaining their aspect ratio.

Step 6: Testing the Slider

After adding the code, it’s important to test the WP slider to ensure everything works as expected. You can preview the page in your browser to check the following:

• The slider should automatically start with the first image and transition smoothly between slides.
• The navigation buttons should allow users to cycle through the images manually.
• If you added indicators, clicking on them should navigate to the corresponding slide.
• The slider should display correctly on all devices (desktop, tablet, and mobile).

If everything works correctly, you have successfully created a WP slider with three images using Bootstrap!

In the next section, we will explore how to style and customize the WP slider, including how to add captions, adjust the transition effects, and make further aesthetic adjustments.

5. Styling and Customizing the WP Slider

Once you’ve successfully set up your WP slider with three images using Bootstrap, it’s time to customize and enhance its appearance to match your website’s overall design. This section will guide you through several ways to style and customize the slider, including adding captions, adjusting transition effects, and more.

Step 1: Adding Captions to Your Images

Adding captions to your slider images can help provide context and enhance the user experience. Bootstrap makes it easy to add captions to each slide by using the carousel-caption class.

Here’s how you can add captions to the three images in your slider:

<div class="carousel-item active">
  <img src="path/to/image1.jpg" class="d-block w-100" alt="Image 1">
  <div class="carousel-caption d-none d-md-block">
    <h5>Caption for Image 1</h5>
    <p>Description or additional text here.</p>
  </div>
</div>

<div class="carousel-item">
  <img src="path/to/image2.jpg" class="d-block w-100" alt="Image 2">
  <div class="carousel-caption d-none d-md-block">
    <h5>Caption for Image 2</h5>
    <p>Description or additional text here.</p>
  </div>
</div>

<div class="carousel-item">
  <img src="path/to/image3.jpg" class="d-block w-100" alt="Image 3">
  <div class="carousel-caption d-none d-md-block">
    <h5>Caption for Image 3</h5>
    <p>Description or additional text here.</p>
  </div>
</div>

Explanation:

• The carousel-caption class is used to display captions over the images.
• The d-none d-md-block class ensures that captions are hidden on smaller screens (mobile and tablet) and only appear on medium and larger screens (desktops).
• You can modify the <h5> and <p> tags to display a heading and description for each image. This can help give users more context about the images you’re showcasing.

Step 2: Customizing the Carousel Transitions

The default transition effect for the carousel is a sliding effect, but you can customize it to use different animations or adjust the transition speed. For example, you might want a fade effect instead of a sliding effect.

To use a fade effect instead of a sliding effect, simply add the carousel-fade class to the carousel container:

<div id="myCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel">
  <!-- Carousel items here -->
</div>

Additional Customization Options:

• Transition Speed: You can adjust the transition speed of the carousel by adding the data-bs-interval attribute. This controls how long each slide stays visible before transitioning to the next one.

<div id="myCarousel" class="carousel slide" data-bs-ride="carousel" data-bs-interval="5000">
  <!-- Carousel items here -->
</div>

The value 5000 is the time in milliseconds (5 seconds) between each transition. You can change this value based on your needs.

• Autoplay: By default, the carousel will automatically transition between slides. If you want to stop this behavior and allow users to manually navigate through the slides, you can set data-bs-ride="false".

<div id="myCarousel" class="carousel slide" data-bs-ride="false">
  <!-- Carousel items here -->
</div>

Step 3: Adjusting the Carousel Layout

To fine-tune the appearance of your slider, you can adjust the layout and add custom styles. For example, you might want the images to cover the full width of the screen or adjust the height for better visibility.

Here’s how you can modify the CSS to fit your design needs:

.carousel-item img {
  width: 100%;
  height: 400px; /* Adjust the height as needed */
  object-fit: cover; /* Ensures the image covers the full area */
}

.carousel-caption {
  background: rgba(0, 0, 0, 0.5); /* Darken background for better readability */
  padding: 20px;
  text-align: center;
}

.carousel-caption h5 {
  font-size: 2rem; /* Adjust the font size */
  font-weight: bold;
  color: #fff;
}

.carousel-caption p {
  font-size: 1rem;
  color: #f8f9fa;
}

Explanation:

• object-fit: cover;: This ensures that the images fill the entire container while maintaining their aspect ratio.
• background: rgba(0, 0, 0, 0.5);: This darkens the caption background slightly, making the text more legible, especially on images with lighter backgrounds.
• You can adjust the font size, font weight, and color of the caption text to suit your site’s design.

Step 4: Customizing Carousel Controls

The default previous and next controls are functional but may not match your site’s design. To customize the appearance of these controls, you can modify the CSS:

.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: #007bff; /* Change the button color */
  border-radius: 50%; /* Make the buttons circular */
  height: 45px;
  width: 45px;
}

.carousel-control-prev-icon:hover,
.carousel-control-next-icon:hover {
  background-color: #0056b3; /* Change color on hover */
}

Explanation:

• These styles change the default background color of the carousel navigation buttons to blue and add a circular shape.
• The hover effect darkens the button color for a more interactive feel.

Step 5: Optimizing for Performance

While the slider looks great, it’s important to ensure that it loads quickly and smoothly for a better user experience. Here are a few tips to optimize the performance of your WP slider:

1. Image Optimization: Compress images to reduce their file size without compromising on quality. Tools like TinyPNG or ImageOptim can help.
2. Lazy Loading: Implement lazy loading to ensure that images are only loaded when they’re about to be shown. You can use a WordPress plugin like a3 Lazy Load to enable this feature automatically.

Step 6: Testing Your WP Slider

Once you’ve customized your WP slider, it’s crucial to test it across different devices and browsers to ensure everything works smoothly. Test the following:

• The images should transition correctly with the desired effect (slide, fade, etc.).
• The captions and navigation buttons should appear and behave as expected.
• The slider should look great and function properly on desktop, tablet, and mobile devices.

6. Frequently Asked Questions (FAQs)

As you work with a WP slider with three images using Bootstrap, you might encounter some common questions or challenges. In this section, we’ll address some of the most frequently asked questions and provide solutions or explanations to help you get the most out of your slider.

Q1: How can I change the number of images in the WP slider?

Answer:
By default, the example code includes three images. If you want to add more or fewer images to the carousel, you simply need to add or remove additional <div class="carousel-item"> elements inside the carousel-inner container.

For example, to add a fourth image, you can do this:

<div class="carousel-item">
  <img src="path/to/image4.jpg" class="d-block w-100" alt="Image 4">
</div>

To remove an image, simply delete the corresponding <div class="carousel-item"> element.

Q2: How do I make my slider autoplay?

Answer:
Bootstrap’s carousel component supports autoplay by default. The data-bs-ride="carousel" attribute in the carousel container enables this feature. However, if you’ve disabled it or want to manually control the autoplay behavior, you can adjust the interval time using the data-bs-interval attribute.

Here’s how you can set it to automatically transition every 5 seconds (5000 milliseconds):

<div id="myCarousel" class="carousel slide" data-bs-ride="carousel" data-bs-interval="5000">
  <!-- Carousel items here -->
</div>

If you want to disable autoplay and make the carousel manually controlled, set data-bs-ride="false":

<div id="myCarousel" class="carousel slide" data-bs-ride="false">
  <!-- Carousel items here -->
</div>

Q3: My images are not appearing in the slider. What could be the issue?

Answer:
There could be several reasons why your images are not showing up:

• Incorrect Image Paths: Double-check that the image paths are correct. If you’re using the WordPress media library, ensure that the image URLs are correct and properly referenced. For example:

  <img src="https://yourwebsite.com/wp-content/uploads/2024/11/image1.jpg" class="d-block w-100" alt="Image 1">

• Permissions: Ensure that the images are accessible by checking file permissions. The images should be publicly readable.
• Broken Links: If you’re linking to external images, ensure they are accessible from your website. A broken link or incorrect URL will prevent the images from displaying.

Q4: How can I change the transition speed or animation?

Answer:
By default, Bootstrap uses a sliding animation for transitions. If you’d like to change the transition speed or animation, you can modify the data-bs-interval attribute (for timing) and apply custom CSS for the transition effect.

1. Changing Slide Transition Speed:
   You can control how fast the images change by adjusting the data-bs-interval attribute.

<div id="myCarousel" class="carousel slide" data-bs-ride="carousel" data-bs-interval="3000">
  <!-- Carousel items here -->
</div>

This will set the transition to 3 seconds (3000 milliseconds). If you set a higher interval, the transition will be slower, and if you set it to a lower number, it will transition faster.

2. Using Fade Transition:
   To create a smoother fade effect instead of a slide, add the carousel-fade class to the carousel container:

<div id="myCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel">
  <!-- Carousel items here -->
</div>

Q5: How can I customize the carousel navigation buttons?

Answer:
You can customize the previous and next buttons by modifying the CSS. For example, you can change the button color, shape, and size to match your website’s style.

Here’s how to style the navigation buttons:

.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: #ff5733; /* Change button color */
  border-radius: 50%; /* Make the buttons round */
  height: 40px; /* Adjust button size */
  width: 40px;  /* Adjust button size */
}

.carousel-control-prev-icon:hover,
.carousel-control-next-icon:hover {
  background-color: #e04b1d; /* Darker color on hover */
}

You can adjust the color, size, and hover effect as needed to fit your design.

Q6: My WP slider is not responsive. How can I fix this?

Answer:
Bootstrap’s carousel is responsive by default, but if your slider is not behaving as expected on smaller devices, there may be an issue with your CSS or image sizes.

1. Ensure Images are Responsive:
   Make sure the images inside your carousel are responsive by adding the following CSS rule to ensure they fit the width of the container and maintain their aspect ratio:

   .carousel-item img {
     width: 100%;
     height: auto;
   }

2. Check Container Width:
   Ensure that the parent container of your carousel (like the <div class="carousel slide">) is not constrained to a fixed width that could cause issues on smaller screens.
3. Use Bootstrap’s Grid System:
   If you’re placing the carousel inside a grid layout, make sure you’re using Bootstrap’s grid system correctly. For example, you could place the carousel inside a col-md-12 to make it full-width on all screens:

   <div class="container">
     <div class="row">
       <div class="col-md-12">
         <!-- Carousel here -->
       </div>
     </div>
   </div>

Q7: How do I add custom CSS to my WP slider?

Answer:
You can add custom CSS to your WordPress slider by following these steps:

Via Theme Customizer:

• Go to your WordPress Dashboard → Appearance → Customize → Additional CSS.
• Add your custom CSS in the provided field and save the changes.

Via Theme’s style.css:

• If you’re using a child theme or custom theme, you can add your custom styles directly to the style.css file of your theme.

Using a Custom CSS Plugin:
If you prefer not to edit the theme files directly, you can install a plugin like Simple Custom CSS and JS to add your custom CSS.

Q8: Can I add videos instead of images to my WP slider?

Answer:
Yes, you can absolutely add videos instead of images in your Bootstrap carousel. Simply replace the <img> tag with a <video> tag, and specify the video source:

<div class="carousel-item active">
  <video class="d-block w-100" autoplay loop muted>
    <source src="path/to/video.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>
</div>