[ACF Video/Image Field] Displays background video or image. May have play buttons or not. Based on Vimeo's system. Relies on several functions for getting random strings and also the responsive image. #wordpress #acf #php #javascript #scss #css

scripts.js

let vimeoPlayers = {};
    
function initVideoPlayers(){

    // console.log('initVideoPlayers called');
    
    jQuery(function($) {

      vimeoPlayers = {};

      if($('.js-vid-player, .video-background').length) {

        if(isMobile) {
          $('.video-play-btn.mobile').css('display','');
        } else {
          $('.video-play-btn.desktop').css('display','');
        }
        
        $('.js-vid-player, .video-background').each(function(){
          iframe = $(this).find('iframe');
          videoId = iframe.attr('id');
          vimeoPlayers[videoId] = new Vimeo.Player(iframe);
        });

        $('.js-vid-play').click(function(){
          videoId = $(this).attr('data-video');
          vimeoPlayers[videoId].setLoop(false);
          vimeoPlayers[videoId].play();
          vimeoPlayers[videoId].setVolume(0.8);
          $(this).closest('.js-vid-player').addClass('playing'); 
        });

        $('.js-vid-pause').click(function(){
          videoId = $(this).attr('data-video');
          vimeoPlayers[videoId].pause();
          $(this).closest('.js-vid-player').removeClass('playing');
        });

        $.each(vimeoPlayers, function(index,value) {
          vimeoPlayers[index].ready().then(function(){
            // console.log('Video '+ index + 'can play');
            $('#'+index).addClass('ready');

            if($('#'+index).hasClass('autoplay')){
              $('#'+index).addClass('playing'); 
            };
          });
        });



        if($('.scroll-play').length) {
    
          // Loop through each vimeo player
          setInterval(function() {
            var count = 0; // Number of videos currently playing
            var maxCount = 3; // Maximum number of videos to play at once

            $('.scroll-play').each(function(){
              var videoId = $(this).attr('id');
              var player = vimeoPlayers[videoId];

              // Check if video is on screen
              if ($(this).isOnScreen()) {
                // Check if video is paused or has ended
                player.getPaused().then(function(paused) {
                  if (paused || player.ended) {
                    player.setCurrentTime(0);
                    player.play();
                    // console.log('Playing video ' + videoId);

                    // Stop video after 20 seconds of footage
                    setTimeout(function(){
                      player.pause();
                      // console.log('Pausing video ' + videoId);
                      count--;
                    }, 20000);

                  }
                });           
                
                // Increment number of videos playing
                count++;

                // Check if maximum number of videos are playing
                if (count >= maxCount) {
                  return false; // Exit loop
                }
              }
            });
          }, 1000); // Run every 1 second
    
        }

      } // endif js-vid-player

    });
  }

jQuery(function($) {
        
    initVideoPlayers();
  
});

styles.scss

.featured-media {
        width: 100%;
        @include aspect-ratio(1361,641);
        overflow: hidden;
        background-color: #000;
        z-index: 0;

        .video-play {
          @include aspect-ratio(1,1,absolute);
          z-index: 10;
          width: 90px;
          max-width: 22%;
          top: 50%;
          left: 50%;
          background-size: contain;
          background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2270%22%20height%3D%2270%22%20viewBox%3D%220%200%2070%2070%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ctitle%3EPlay%20-%20Video%20Copy%3C%2Ftitle%3E%3Cg%20fill%3D%22%23FFF%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M35%200C15.67%200%200%2015.67%200%2035s15.67%2035%2035%2035%2035-15.67%2035-35S54.33%200%2035%200zm0%204c17.12%200%2031%2013.88%2031%2031%200%2017.12-13.88%2031-31%2031C17.88%2066%204%2052.12%204%2035%204%2017.88%2017.88%204%2035%204z%22%20fill-rule%3D%22nonzero%22%2F%3E%3Cpath%20d%3D%22M48.5%2035L29%2048.5v-27z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
          background-repeat: no-repeat;
          font-size: 0;
          text-indent: 100%;
          overflow: hidden;
          white-space: nowrap;
          @include transform(translate(-50%,-50%));
        }

        .bg-video {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: center;
          z-index: 1;
          @include transform(scale(1.2));
        }

        img {
          @include cover;
          object-fit: cover;
        }
      }

template.php

<?php if(have_rows('featured_media')): ?>
  	<?php while(have_rows('featured_media')): the_row(); ?>
      <div class='featured-media'>
    		<?php $type = get_sub_field( 'type' );
        if($type == 'video'):

          $video = get_sub_field( 'video',false,false );
          $vid_container_id = kdm_get_random_string();
          $vid_id = (int) substr(parse_url($video, PHP_URL_PATH), 1);
          
          if($video): ?>
            <div class="js-vid-play video-play video-play-btn mobile" style="display:none;" data-video="vid-inline-<?php echo $vid_container_id; ?>">Play Video</div>
            <a href="#popup-video-<?php echo $vid_container_id; ?>" class="popup-video-custom video-play video-play-btn desktop" style="display:none;" data-effect="mfp-video-custom" data-video="vid-popup-<?php echo $vid_container_id; ?>">Play Video</a>

            <!-- // Background Version -->
            <iframe class="bg-video" src="https://player.vimeo.com/video/<?php echo $vid_id; ?>?background=1&title=0&byline=0&portrait=0&playsinline=1&autopause=0" width="640" height="360" frameborder="0" allow="autoplay; fullscreen"></iframe>

            <!-- // Inline Version for Mobile -->
            <div class='js-vid-player hide'>
              <iframe id="vid-inline-<?php echo $vid_container_id; ?>" src="https://player.vimeo.com/video/<?php echo $vid_id; ?>?title=0&byline=0&portrait=0&playsinline=0" width="640" height="360" frameborder="0" allow="autoplay; fullscreen"></iframe>
            </div><!-- /.js-vid-player -->

            <!-- // Popup Version for Desktop -->
            <div id='popup-video-<?php echo $vid_container_id; ?>' class='mfp-hide mfp-with-anim'>
              <div class='video-container'>
                <div class='flex-inner'>
                  <div class='mfp-close'></div>   
                  <div class='video'>
                    <div class='v-video'>
                      <div class='js-vid-player'>
                        <iframe id="vid-popup-<?php echo $vid_container_id; ?>" src="https://player.vimeo.com/video/<?php echo $vid_id; ?>?title=0&byline=0&portrait=0&playsinline=0" width="640" height="360" frameborder="0" allow="autoplay; fullscreen"></iframe>
                      </div><!-- /.js-vid-player -->
                    </div>
                  </div><!-- /.video -->
                </div><!-- /.flex-inner -->
              </div><!-- /.video-container -->
            </div><!-- /.mfp -->
          <?php endif; ?>
      		
        <?php elseif($type == 'image'):
          $image = get_sub_field( 'image',false,false);
          if($image):
            $image = rkt_get_responsive_image($image, 'large', true);
          endif; ?>
        <?php endif; ?>
      </div><!-- /.featured-media -->
  	<?php endwhile; ?>
  <?php endif; ?>