Strange Android "poster" behavior for Video

Hello,

We have checked out your Website and as we mentioned before all the Touch Devices are treated as same and not specifically Android or iOS.

However, since the Codes available with Canvas is already capable of handling this based on the Device's OS, consider adding the following JS Code at the bottom of the page just after the js/functions.js JS File Linking:

<script>
	jQuery(document).ready( function(){
		if( SEMICOLON.isMobile.Android() ) {
			jQuery('body').addClass('device-android');
		}
	});
</script>

Then you can simply add the following CSS Code for Visibility Control for Android Devices:

body.device-touch.device-android .visible-android,
body.device-touch.device-android .visible-android-block { display: block !important; }

body.device-touch.device-android .visible-android-inline-block { display: inline-block !important; }

body.device-touch.device-android .visible-android-inline { display: inline !important; }

body.device-touch.device-android .hidden-android { display: none !important; }

and add the Classes .visible-android and .hidden-android to the Elements you want to show/hide on Android Devices.

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,

Please find and delete the following line of code in the css/responsive.css File:

#slider:not(.swiper_wrapper) .slider-caption,

This will start displaying the Text Overlay on Mobile Devices.

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

Hello,

Thank You so much for your Patience on this. Please allow us about 24 Hours to investigate this issue since we do not have a physical Android Device with us at the moment. But we will check this out at the earliest and get back to you with the Solution. 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.

Hello,

Thank You so much for your Patience! We have checked this out for you thoroughly and along with the Codes:

1. The issue you mentioned you are facing with the Overlay Image Size is not actually an issue but this is how the background image gets fit inside the container to show the best possible size of the image by covering it in the background of the available size of the container. You can fix this by not forcing the full screen on Mobiles. Simply remove the .force-full-screen and the Images will be resized to an optimal size on Mobile Devices.

2. The Text Size is large on Mobile Devices since you have defined a Custom Style of font-size:3.0em; on the <h1> Tag.

Hope this Helps!

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

Hello,

Thank You so much for your Patience!

Haha no not at all! Weebly have their own codes and we have our own! We are not perfect and there definitely can be some issues, however what matters is that we will definitely work on the Codes to solve it for you and we will! :)

We have tried to check out the Codes you are using on Our Own Localhost and created a Working Code for you:

<section id="slider" class="full-screen swiper_wrapper">
	<!--<section id="slider" class="force-full-screen full-screen">-->
		<div class="full-screen dark section nopadding nomargin noborder ohidden">

		<div class="container clearfix">
			<div class="slider-caption slider-caption-center">
				<h1  style="font-size:3.0em;" data-animate="fadeInUp" data-delay="1500"><strong>ACHIEVA PRODUCTS</strong></h1>
				<p data-animate="fadeInUp" data-delay="3700"><strong>FOR  ALL  OF  YOUR   SCHOOLS  RECOGNITION  NEEDS</strong></p>
				<br> <br>
				<p data-animate="fadeInUp" data-delay="5200"><strong>CAP  AND  GOWNS  &#8226;  GRADUATION  RINGS  &#8226;   SCHOOL  SPIRITWEAR</strong></p>
			</div>
		</div>
		<div class="video-wrap no-placeholder">

				  <video poster="http://www.achieva.us/images/Captoss.png"  preload="auto" loop autoplay controls muted playsinline>
					   <source src="http://www.achieva.us/videos/Captoss.mp4" type="video/mp4" />
					   <source src="http://www.achieva.us/videos/Captoss.webm" type="video/webm" />
					   <source src="http://www.achieva.us/videos/Captoss.ogv" type="video/ogg" />
				  </video>

			<div class="video-overlay" style="background-color: rgba(0,0,0,0.45);"></div>
		</div>

	</div>

</section>

This should work fine.

Additionally, for scaling down the Font Size, consider using the Responsive Classes. You can add the following CSS Code to control the Font Size:

.device-lg .slider-caption h1 { font-size: 64px; }

.device-md .slider-caption h1 { font-size: 56px; }

.device-sm .slider-caption h1 { font-size: 48px; }

.device-xs .slider-caption h1 { font-size: 36px; }

.device-xxs .slider-caption h1 { font-size: 32px; }

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