Search

<div class="about-banner">
   <h1><?php echo $title; ?></h1>
   <h2><?php echo $subtitle; ?></h2>
   <p><?php echo $text_muted; ?></p>
   <div class="banner-media">
       <!-- Display Image as Background -->
       <img src="<?php echo $image; ?>" alt="<?php echo $title; ?>" class="banner-image">

       <!-- Display Video -->
       <?php if (!empty($video)) : ?>
           <video autoplay muted loop playsinline class="banner-video">
               <source src="<?php echo $video; ?>" type="video/mp4">
               Your browser does not support the video tag.
           </video>
       <?php endif; ?>
   </div>
   <div class="newsletter-section">
       <?php echo $newsletter_title; ?>
       <?php if ($show_newsletter_form === "yes") : ?>
           <!-- Include the Newsletter form -->
       <?php endif; ?>
   </div>
</div>

<style>
   .banner-media {
       position: relative;
       width: 100%;
       height: auto;
       overflow: hidden;
   }

   .banner-image {
       width: 100%;
       height: auto;
       display: block;
   }

   .banner-video {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       object-fit: cover;
       opacity: 0.7; /* Adjust opacity to make both image and video visible */
       pointer-events: none; /* Prevent user from interacting with video */
   }
</style>