Adding Hosted Video to Canvas Slider

Hello,

You will need to use a .mp4 or .webm Video to use the BG Video Functionality for Vimeo or Wistia Videos. You can use their APIs to retrieve the .mp4 or .webm Files and use them in the Default Video Codes. However, Youtube BG Videos can be directly supported in the Canvas Slider. Please use this File: https://www.dropbox.com/s/273u1nhy3186fwg/slider-canvas-youtube-video-event.html?dl=1 to check out the Example.

This will definitely work fine. Let us know if we can help you with anything else or if you find any further issues.

Hello,

There appears to be some issue with the Youtube BG Plugin and Swiper Slider conflicting with each other. It is definitely possible to play multiple Youtube Videos on the Same Page. Please make a few changes as mentioned below:

1. Find the sliderRun: function() Function Block in the js/functions.js File and update this entire Function Block using the following code:

sliderRun: function(){

	if( typeof Swiper === 'undefined' ) {
		console.log('sliderRun: Swiper not Defined.');
		return true;
	}

	if( $slider.hasClass('customjs') ) { return true; }

	if( $slider.hasClass('swiper_wrapper') ) {

		var element = $slider.filter('.swiper_wrapper'),
			elementDirection = element.attr('data-direction'),
			elementSpeed = element.attr('data-speed'),
			elementAutoPlay = element.attr('data-autoplay'),
			elementLoop = element.attr('data-loop'),
			elementEffect = element.attr('data-effect'),
			elementGrabCursor = element.attr('data-grab'),
			slideNumberTotal = element.find('#slide-number-total'),
			slideNumberCurrent = element.find('#slide-number-current'),
			sliderVideoAutoPlay = element.attr('data-video-autoplay');

		if( !elementSpeed ) { elementSpeed = 300; }
		if( !elementDirection ) { elementDirection = 'horizontal'; }
		if( elementAutoPlay ) { elementAutoPlay = Number( elementAutoPlay ); }
		if( elementLoop == 'true' ) { elementLoop = true; } else { elementLoop = false; }
		if( !elementEffect ) { elementEffect = 'slide'; }
		if( elementGrabCursor == 'false' ) { elementGrabCursor = false; } else { elementGrabCursor = true; }
		if( sliderVideoAutoPlay == 'false' ) { sliderVideoAutoPlay = false; } else { sliderVideoAutoPlay = true; }

		if( element.find('.swiper-pagination').length > 0 ) {
			var elementPagination = '.swiper-pagination',
				elementPaginationClickable = true;
		} else {
			var elementPagination = '',
				elementPaginationClickable = false;
		}

		var elementNavNext = '#slider-arrow-right',
			elementNavPrev = '#slider-arrow-left';

		swiperSlider = new Swiper( element.find('.swiper-parent') ,{
			direction: elementDirection,
			speed: Number( elementSpeed ),
			autoplay: elementAutoPlay,
			loop: elementLoop,
			effect: elementEffect,
			slidesPerView: 1,
			grabCursor: elementGrabCursor,
			pagination: elementPagination,
			paginationClickable: elementPaginationClickable,
			prevButton: elementNavPrev,
			nextButton: elementNavNext,
			onInit: function(swiper){
				SEMICOLON.slider.sliderParallaxDimensions();
				element.find('.yt-bg-player').removeClass('customjs');
				SEMICOLON.widget.youtubeBgVideo();
				$('.swiper-slide-active [data-caption-animate]').each(function(){
					var $toAnimateElement = $(this),
						toAnimateDelay = $toAnimateElement.attr('data-caption-delay'),
						toAnimateDelayTime = 0;
					if( toAnimateDelay ) { toAnimateDelayTime = Number( toAnimateDelay ) + 750; } else { toAnimateDelayTime = 750; }
					if( !$toAnimateElement.hasClass('animated') ) {
						$toAnimateElement.addClass('not-animated');
						var elementAnimation = $toAnimateElement.attr('data-caption-animate');
						setTimeout(function() {
							$toAnimateElement.removeClass('not-animated').addClass( elementAnimation + ' animated');
						}, toAnimateDelayTime);
					}
				});
				$('[data-caption-animate]').each(function(){
					var $toAnimateElement = $(this),
						elementAnimation = $toAnimateElement.attr('data-caption-animate');
					if( $toAnimateElement.parents('.swiper-slide').hasClass('swiper-slide-active') ) { return true; }
					$toAnimateElement.removeClass('animated').removeClass(elementAnimation).addClass('not-animated');
				});
				SEMICOLON.slider.swiperSliderMenu();
			},
			onSlideChangeStart: function(swiper){
				if( slideNumberCurrent.length > 0 ){
					if( elementLoop == true ) {
						slideNumberCurrent.html( Number( element.find('.swiper-slide.swiper-slide-active').attr('data-swiper-slide-index') ) + 1 );
					} else {
						slideNumberCurrent.html( swiperSlider.activeIndex + 1 );
					}
				}
				$('[data-caption-animate]').each(function(){
					var $toAnimateElement = $(this),
						elementAnimation = $toAnimateElement.attr('data-caption-animate');
					if( $toAnimateElement.parents('.swiper-slide').hasClass('swiper-slide-active') ) { return true; }
					$toAnimateElement.removeClass('animated').removeClass(elementAnimation).addClass('not-animated');
				});
				SEMICOLON.slider.swiperSliderMenu();
			},
			onSlideChangeEnd: function(swiper){
				element.find('.swiper-slide').each(function(){
					var slideEl = $(this);
					if( slideEl.find('video').length > 0 && sliderVideoAutoPlay == true ) { slideEl.find('video').get(0).pause(); }
					if( slideEl.find('.yt-bg-player.mb_YTPlayer:not(.customjs)').length > 0 && sliderVideoAutoPlay == true ) { slideEl.find('.yt-bg-player.mb_YTPlayer:not(.customjs)').YTPPause(); }
				});
				element.find('.swiper-slide:not(".swiper-slide-active")').each(function(){
					var slideEl = $(this);
					if( slideEl.find('video').length > 0 ) {
						if( slideEl.find('video').get(0).currentTime != 0 ) { slideEl.find('video').get(0).currentTime = 0; }
					}
					if( slideEl.find('.yt-bg-player.mb_YTPlayer:not(.customjs)').length > 0 ) {
						slideEl.find('.yt-bg-player.mb_YTPlayer:not(.customjs)').YTPGetPlayer().seekTo( slideEl.find('.yt-bg-player.mb_YTPlayer:not(.customjs)').attr('data-start') );
					}
				});
				if( element.find('.swiper-slide.swiper-slide-active').find('video').length > 0 && sliderVideoAutoPlay == true ) { element.find('.swiper-slide.swiper-slide-active').find('video').get(0).play(); }
				if( element.find('.swiper-slide.swiper-slide-active').find('.yt-bg-player.mb_YTPlayer:not(.customjs)').length > 0 && sliderVideoAutoPlay == true ) { element.find('.swiper-slide.swiper-slide-active').find('.yt-bg-player.mb_YTPlayer:not(.customjs)').YTPPlay(); }

				element.find('.swiper-slide.swiper-slide-active [data-caption-animate]').each(function(){
					var $toAnimateElement = $(this),
						toAnimateDelay = $toAnimateElement.attr('data-caption-delay'),
						toAnimateDelayTime = 0;
					if( toAnimateDelay ) { toAnimateDelayTime = Number( toAnimateDelay ) + 300; } else { toAnimateDelayTime = 300; }
					if( !$toAnimateElement.hasClass('animated') ) {
						$toAnimateElement.addClass('not-animated');
						var elementAnimation = $toAnimateElement.attr('data-caption-animate');
						setTimeout(function() {
							$toAnimateElement.removeClass('not-animated').addClass( elementAnimation + ' animated');
						}, toAnimateDelayTime);
					}
				});
			}
		});

		if( slideNumberCurrent.length > 0 ) {
			if( elementLoop == true ) {
				slideNumberCurrent.html( Number( element.find('.swiper-slide.swiper-slide-active').attr('data-swiper-slide-index') ) + 1 );
			} else {
				slideNumberCurrent.html( swiperSlider.activeIndex + 1 );
			}
		}
		if( slideNumberTotal.length > 0 ) {
			slideNumberTotal.html( element.find('.swiper-slide:not(.swiper-slide-duplicate)').length );
		}

	}
}

1. Find the youtubeBgVideo: function() Function Block in the js/functions.js File and update this entire Function Block using the following code:

youtubeBgVideo: function(){

	if( !$().mb_YTPlayer ) {
		console.log('youtubeBgVideo: YoutubeBG Plugin not Defined.');
		return true;
	}

	var $youtubeBgPlayerEl = $('.yt-bg-player');
	if( $youtubeBgPlayerEl.hasClass('customjs') ) { return true; }

	if( $youtubeBgPlayerEl.length > 0 ){
		$youtubeBgPlayerEl.each( function(){
			var element = $(this),
				ytbgVideo = element.attr('data-video'),
				ytbgMute = element.attr('data-mute'),
				ytbgRatio = element.attr('data-ratio'),
				ytbgQuality = element.attr('data-quality'),
				ytbgOpacity = element.attr('data-opacity'),
				ytbgContainer = element.attr('data-container'),
				ytbgOptimize = element.attr('data-optimize'),
				ytbgLoop = element.attr('data-loop'),
				ytbgVolume = element.attr('data-volume'),
				ytbgStart = element.attr('data-start'),
				ytbgStop = element.attr('data-stop'),
				ytbgAutoPlay = element.attr('data-autoplay'),
				ytbgFullScreen = element.attr('data-fullscreen');

			if( ytbgMute == 'false' ) { ytbgMute = false; } else { ytbgMute = true; }
			if( !ytbgRatio ) { ytbgRatio = '16/9'; }
			if( !ytbgQuality ) { ytbgQuality = 'hd720'; }
			if( !ytbgOpacity ) { ytbgOpacity = 1; }
			if( !ytbgContainer ) { ytbgContainer = 'self'; }
			if( ytbgOptimize == 'false' ) { ytbgOptimize = false; } else { ytbgOptimize = true; }
			if( ytbgLoop == 'false' ) { ytbgLoop = false; } else { ytbgLoop = true; }
			if( !ytbgVolume ) { ytbgVolume = 1; }
			if( !ytbgStart ) { ytbgStart = 0; }
			if( !ytbgStop ) { ytbgStop = 0; }
			if( ytbgAutoPlay == 'false' ) { ytbgAutoPlay = false; } else { ytbgAutoPlay = true; }
			if( ytbgFullScreen == 'true' ) { ytbgFullScreen = true; } else { ytbgFullScreen = false; }

			element.mb_YTPlayer({
				videoURL: ytbgVideo,
				mute: ytbgMute,
				ratio: ytbgRatio,
				quality: ytbgQuality,
				opacity: Number(ytbgOpacity),
				containment: ytbgContainer,
				optimizeDisplay: ytbgOptimize,
				loop: ytbgLoop,
				vol: Number(ytbgVolume),
				startAt: Number(ytbgStart),
				stopAt: Number(ytbgStop),
				autoplay: ytbgAutoPlay,
				realfullscreen: ytbgFullScreen,
				showYTLogo: false,
				showControls: false
			});
		});
	}
}

1. Remove the following code from the Global Variable List at the bottom of the js/functions.js File:

$youtubeBgPlayerEl = $('.yt-bg-player'),

This will definitely fix your issue. We will release this fix in our Next Update. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.