Background video is not loading

Hello,

The Video is blocked from AutoPlaying by the Browser as it is not muted. You will notice that as soon as you add the muted Attribute to the <video> Tag, it will start playing. This is something Modern Browsers now enforce upon for a better User Experience.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Hello,

Please consider using this Solution: https://themes.semicolonweb.com/html/canvas/index-video-sound-event.html .

CSS:

#video-slider-mute {
	position: absolute;
	top: auto;
	left: auto;
	right: 20px;
	bottom: 20px;
	width: 32px;
	height: 32px;
	line-height: 32px;
	border-radius: 50%;
	background-color: rgba(255,255,255,0.2);
	color: #FFF;
	font-size: 16px;
	text-align: center;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
}

#video-slider-mute i {
	position: relative;
	left: 1px;
}

#video-slider-mute i:nth-of-type(2),
#video-slider-mute.video-muted i:nth-of-type(1) { display: none; }

#video-slider-mute.video-muted i:nth-of-type(2) { display: block; }

JS:

<script>
	jQuery('#video-slider-mute').on('click', function(e){
		e.preventDefault();

		if( jQuery(this).hasClass('video-muted') ) {
			jQuery('#slide-video').prop( 'muted', false );
		} else {
			jQuery('#slide-video').prop( 'muted', true );
		}

		jQuery(this).toggleClass('video-muted');
	});
</script>

HTML:

<a href="#" id="video-slider-mute"><i class="icon-line2-volume-2"></i><i class="icon-line2-volume-off"></i></a>

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Hello,

Consider adding the HTML directly inside the #wrapper instead of inside the .video-wrap DIV. You can also assign a Custom Z-Index like: style="z-index:199;" to place it at the top of the stack so that it is clickable.

This should definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Hello,

1. Simply add the .video-muted Class to the #video-slider-mute Element.

2. Apple and Android do not allow autoplay for HTML5 Videos/Audio to prevent unsolicited usage of Bandwidth (which can be Cellular) on the User’s Mobile Device. They can only be played on their native Video Player.

Here is the Official Reference for Apple: https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html .

Meanwhile, currently, the Inline Video Autoplay is supported only from iOS 10 onwards. You can use the following instructions to make it work on iOS 10 or above devices:

a. Add the playsinline Attribute to the <video> Tag. Example:

<video id="slide-video" poster="images/videos/explore-poster.jpg" preload="auto" loop autoplay muted playsinline>
    ...
</video>

b. Then add the .no-placeholder Class to the .video-wrap Container that encloses the <video> Tag. Example:

<div class="video-wrap no-placeholder">
    <video poster="images/videos/explore-poster.jpg" preload="auto" loop autoplay muted playsinline>
        ...
    </video>
    <div class="video-overlay" style="background-color: rgba(0,0,0,0.55);"></div>
</div>

This should definitely work fine. Hope this Helps!

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

Hello,

This is due to the following lines of code in the css/custom.css File:

#copyrights  {
  background-color: transparent;
  margin-top:-100px;
}

You might need to define a different margin-top Value in different Media Queries.

Example:

.device-xs #copyrights  {
  margin-top:-130px;
}

Make sure that you add the .custom-hero-bg Class to the Hero Section. The Responsive Classes are as follows:

.device-xl – Class for Large Devices >=1200px

.device-lg – Class for Medium Devices >=992px to 1199px

.device-md – Class for Tablets

.device-sm – Class for Landscape Mobiles or Phablets.

.device-xs – Class for Portrait Mobiles

You can add these Custom CSS codes in the css/custom.css File.

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.