Video placeholder

Met onderstaande code kan je op een eenvoudige manier een iframe pas inladen (geanimeerd) wanneer er op een play button geklikt word. In eerste instantie zal de ingestelde afbeelding worden getoond. Hierdoor staat de “video” in eerste instantie netter op de pagina. Bepaalde waardes in de CSS moeten nog wel aangepast worden.

HTML / PHP #

<?php
   $video_placeholder = get_field('video_placeholder');
   $video_url = get_field('video_url');
?>

<?php if (exists($video_url)) { ?>
   <div class="aspect-ratio-16-9 video-container parallax-shadow">

      <?php 
         echo wp_get_attachment_image( $video_placeholder, 'medium', false, array(
            'class'=>'video-placeholder', 
            'data-video'=>$video_url) 
         ); 
      ?>

      <div class="video-toggle">
         <i class="fas fa-play"></i>
      </div>
   </div>
<?php } ?>

CSS #

@keyframes fadeOut {
   0% {
      opacity: 1;
   }

   100% {
      opacity: 0;
   }
}

@keyframes fadeIn {
   0% {
      opacity: 0;
   }

   100% {
      opacity: 1;
   }
}

.video-toggle {
    width: 50px;
    height: 50px;

    i {
        font-size: 1rem;
         transform: translateX(1px);
    }
}

.video-container {
   position: relative;
   background-color: #F9F9F9;

   .video-toggle {
      border-radius: 50%;
      width: 90px;
      height: 90px;
      background-color: var(--brand_primary);
      color: #FFFFFF;
      z-index: 1;
      position: absolute;
      top: 50%;
      left: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.8rem;
      transform: scale(1) translate(-50%, -50%);
      transform-origin: top left;
      transition: var(--transition);
      cursor: pointer;

      i {
         transform: translateX(4px);
      }

      &:hover,
      &:focus {
         transform: scale(1.1) translate(-50%, -50%);
         background-color: var(--brand_primary-dark);
      }

      &:active {
         transform: scale(1.3) translate(-50%, -50%);
         background-color: var(--brand_primary-darker);
      }
   }

   .video {
      opacity: 0;
   }

   &.active {
      .video-placeholder {
         animation: fadeOut 0.5s forwards;
      }

      .video {
         z-index: 2;
         animation: fadeIn 0.5s forwards;
         animation-delay: 0.5s;
      }

      .video-toggle {
         transform: scale(0) translate(-50%, -50%);
      }
   }
}

JS #

function replaceImage() {
   jQuery('.video-toggle:not(.popup)').on( "click", function() {
      var video = '<iframe class="video" src="'+ jQuery(this).prev('.video-placeholder').attr('data-video') +'"></iframe>';
      jQuery(this).parent('.video-container').append(video).addClass('active');
   });
}