Usage
This function runs automatically, so it is not called manually. Is this incorrect?
Additional Notes
This function looks for any iframe with a src that contains “vimeo”.
Source File
Located in /assets/js/modules/video.js on line 586.
No Hooks
This function does not have any filters or actions available. Request one?
JavaScript
nebula.createVimeoPlayers = function(){
jQuery('iframe[src*="vimeo"], iframe[data-src*="vimeo"]').each(function(){ //This is not finding lazy loaded videos
if ( !jQuery(this).hasClass('ignore') ){ //Use this class to ignore certain videos from tracking
let id = jQuery(this).attr('data-video-id') || jQuery(this).attr('data-vimeo-id') || jQuery(this).attr('id') || false;
if ( !id ){
if ( jQuery(this).attr('src').includes('player_id') ){
id = jQuery(this).attr('src').split('player_id=').pop().split('&')[0]; //Use the player_id parameter. Note: This is no longer used by the Vimeo API!
} else {
id = jQuery(this).attr('src').split('/').pop().split('?')[0]; //Grab the ID off the end of the URL (ignoring query parameters)
}
if ( id && !parseInt(id) ){ //If the ID is a not number try to find a number in the iframe src
id = (/\d{6,}/g).exec(jQuery(this).attr('src'))[0];
}
jQuery(this).attr('id', id);
}
nebula.videos = nebula.videos || {}; //Always make sure this is defined
if ( typeof nebula.videos[id] === 'object' ){ //If this video is already being tracked ignore it
return; //Continue the loop
}
//Fill in the data object here
nebula.videos[id] = {
player: new Vimeo.Player(jQuery(this)),
element: jQuery(this),
platform: 'vimeo', //The platform the video is hosted using.
autoplay: jQuery(this).attr('src').includes('autoplay=1'), //Look for the autoplay parameter in the iframe src.
id: id,
current: 0, //The current position of the video. Units: Seconds
video_percent: 0, //The percent of the current position. Multiply by 100 for actual percent.
engaged: false, //Whether the viewer has watched enough of the video to be considered engaged.
seeker: false, //Whether the viewer has seeked through the video at least once.
seen: [], //An array of percentages seen by the viewer. This is to roughly estimate how much was watched.
watched: 0, //Amount of time watching the video (regardless of seeking). Accurate to 1% of video duration. Units: Seconds
watchedPercent: 0, //The decimal percentage of the video watched. Multiply by 100 for actual percent.
pausedYet: false, //If this video has been paused yet by the user.
};
//Title
nebula.videos[id].player.getVideoTitle().then(function(title){
nebula.videos[id].title = title; //The title of the video
});
//Duration
nebula.videos[id].player.getDuration().then(function(duration){
nebula.videos[id].duration = duration; //The total duration of the video. Units: Seconds
});
//Play
nebula.videos[id].player.on('play', function(e){
let thisEvent = {
event_name: 'video_start',
event_category: 'Videos',
event_action: ( nebula.isInView(jQuery(nebula.videos[id].element)) )? 'Play' : 'Play (Not In View)',
video_title: nebula.videos[id].title,
video_provider: 'vimeo',
autoplay: nebula.videos[id].autoplay
};
if ( nebula.videos[id].autoplay ){
thisEvent.event_action += ' (Autoplay)';
} else {
nebula.videos[id].element.addClass('playing');
}
nebula.dom.document.trigger('nebula_event', thisEvent);
gtag('event', thisEvent.event_name, nebula.gaEventObject(thisEvent));
nebula.crm('event', 'Video Play Began: ' + thisEvent.title);
nebula.dom.document.trigger('nebula_playing_video', nebula.videos[id].title);
});
//Time Update
nebula.videos[id].player.on('timeupdate', function(e){
nebula.videos[id].duration = e.duration;
nebula.videos[id].current = e.seconds;
nebula.videos[id].percent = e.percent;
//Determine watched percent by adding current percents to an array, then count the array!
nowSeen = Math.ceil(nebula.videos[id].percent*100);
if ( nebula.videos[id].seen.indexOf(nowSeen) < 0 ){
nebula.videos[id].seen.push(nowSeen);
}
nebula.videos[id].watchedPercent = nebula.videos[id].seen.length;
nebula.videos[id].watched = (nebula.videos[id].seen.length/100)*nebula.videos[id].duration; //Roughly calculate time watched based on percent seen
if ( !nebula.videos[id].autoplay && nebula.videos[id].watchedPercent > 25 && !nebula.videos[id].engaged ){
if ( nebula.isInView(jQuery(nebula.videos[id].element)) ){
let thisEvent = {
event_name: 'video_engagement',
event_category: 'Videos',
event_action: ( nebula.videos[id].autoplay )? 'Engaged' : 'Engaged (Autoplay)',
video_title: nebula.videos[id].title,
video_provider: 'vimeo',
autoplay: nebula.videos[id].autoplay,
non_interaction: true
};
nebula.dom.document.trigger('nebula_event', thisEvent);
gtag('event', thisEvent.event_name, nebula.gaEventObject(thisEvent));
nebula.crm('event', 'Video Engaged: ' + thisEvent.title);
nebula.videos[id].engaged = true;
nebula.dom.document.trigger('nebula_engaged_video', nebula.videos[id].title);
}
}
});
//Pause
nebula.videos[id].player.on('pause', function(e){
jQuery(this).removeClass('playing');
let thisEvent = {
event_name: 'video_pause',
event_category: 'Videos',
event_action: 'Paused',
first_pause: !nebula.videos[id].pausedYet,
play_time: Math.round(nebula.videos[id].watched),
video_percent: Math.round(e.percent*100),
video_title: nebula.videos[id].title,
video_provider: 'vimeo',
autoplay: nebula.videos[id].autoplay
};
if ( !nebula.videos[id].pausedYet && !nebula.videos[id].seeker ){ //Only capture first pause if they didn't seek
nebula.videos[id].pausedYet = true;
}
nebula.dom.document.trigger('nebula_event', thisEvent);
gtag('event', thisEvent.event_name, nebula.gaEventObject(thisEvent));
gtag('event', 'timing_complete', {
name: thisEvent.event_action,
value: Math.round(e.seconds*1000),
event_category: thisEvent.event_category,
event_label: thisEvent.title,
});
nebula.crm('event', 'Video Paused: ' + thisEvent.title);
nebula.dom.document.trigger('nebula_paused_video', nebula.videos[id]);
});
//Seeked
nebula.videos[id].player.on('seeked', function(e){
let thisEvent = {
event_name: 'video_seek',
event_category: 'Videos',
event_action: 'Seek',
position: e.seconds,
video_title: nebula.videos[id].title,
video_provider: 'vimeo',
autoplay: nebula.videos[id].autoplay
};
thisEvent.event_label = thisEvent.title + ' [to: ' + thisEvent.position + ']';
nebula.dom.document.trigger('nebula_event', thisEvent);
gtag('event', thisEvent.event_name, nebula.gaEventObject(thisEvent));
nebula.crm('event', 'Video Seeked: ' + thisEvent.title);
nebula.videos[id].seeker = true;
nebula.dom.document.trigger('nebula_seeked_video', nebula.videos[id]);
});
//Ended
nebula.videos[id].player.on('ended', function(e){
jQuery(this).removeClass('playing');
let thisEvent = {
event_name: 'video_complete',
event_category: 'Videos',
event_action: ( nebula.isInView(jQuery(nebula.videos[id].element)) )? 'Ended' : 'Ended (Not In View)',
video_title: nebula.videos[id].title,
video_provider: 'vimeo',
play_time: Math.round(nebula.videos[id].watched),
progress: Math.round(nebula.videos[id].watched*1000),
autoplay: nebula.videos[id].autoplay,
non_interaction: true
};
if ( nebula.videos[id].autoplay ){
thisEvent.event_action += ' (Autoplay)';
}
nebula.dom.document.trigger('nebula_event', thisEvent);
gtag('event', thisEvent.event_name, nebula.gaEventObject(thisEvent));
gtag('event', 'timing_complete', {
name: thisEvent.event_action,
value: thisEvent.progress,
event_category: thisEvent.event_category,
event_label: thisEvent.title,
});
nebula.crm('event', 'Video Ended: ' + thisEvent.title);
nebula.dom.document.trigger('nebula_ended_video', nebula.videos[id]);
});
nebula.dom.document.trigger('nebula_vimeo_player_created', nebula.videos[id]);
}
});
if ( typeof videoProgress === 'undefined' ){
let videoProgress = {};
}
};
Override
To override or disable this JavaScript function, simply redeclare it with the exact same function name. Remember: Some functionality is conditionally loaded via dynamic imports, so if your function is not overriding properly, try listening for a DOM event (described below).
JavaScript
For non-module import functions:
nebula.createVimeoPlayers = function(){
//Write your own code here, leave it blank, or return false.
}
For dynamically imported module function overrides:
jQuery(window).on('load', function(){
nebula.createVimeoPlayers = function(){
//Write your own code here, leave it blank, or return false.
}
});
Custom Nebula DOM events do also exist, so you could also try the following if the Window Load listener does not work:
jQuery(document).on('nebula_module_loaded', function(module){
//Note that the module variable is also available to know which module specifically was imported
if ( typeof nebula.createVimeoPlayers === 'function' ){
nebula.createVimeoPlayers = function(){
//Write your own code here, leave it blank, or return false.
}
}
});