Skip to content

Instantly share code, notes, and snippets.

@dougkeeling
Created April 3, 2023 19:32
Show Gist options
  • Save dougkeeling/42dc2c6215e59a33da0f151db6612ad1 to your computer and use it in GitHub Desktop.
Save dougkeeling/42dc2c6215e59a33da0f151db6612ad1 to your computer and use it in GitHub Desktop.
[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
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();
});
.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;
}
}
<?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; ?>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment