15 replies · opened Nov 15, 2016
so my video was working on my android cell ( yes I know Iphone wont play it as we discussed). But Android was fine...until I put in a poster. With the poster the android wont play the video- just shows poster. Remove poster and android plays video.
any solution? I need poster for iphone- but would like android to play video. PC is unaffected and video loads either way
By the way- I am wondering if this behavior is being caused by the JS code you had worked up to solve the video resizing issue I had. Could the 700ms delay is causing poster to load?
setTimeout( function() { SEMICOLON.widget.html5Video(); }, 700 );
or is it unrelated?
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:
jQuery(document).ready( function(){
if( SEMICOLON.isMobile.Android() ) {
jQuery('body').addClass('device-android');
}
});
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.
I have not "touched" any of the code yet and all of a sudden android video is working. 2 Days ago it was not. But now the overlay isnt working on android- It is working on on PC. And it had worked on android in the past. So why has overlay of text stopped?
<div class="slider-caption slider-caption-center">
<h1 style="font-size:3.0em;"
data-animate="fadeInUp" data-delay="1500">ACHIEVA PRODUCTS</h1>
<p data-animate="fadeInUp" data-delay="3700">FOR ALL OF YOUR SCHOOLS RECOGNITION NEEDS</p>
<br> <br>
<p data-animate="fadeInUp" data-delay="5200">**CAP AND GOWNS • GRADUATION RINGS • SCHOOL SPIRITWEAR**</p>
</div>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.
**Not working properly- **
you see this goes back to what I was trying to explain to you before. The screen image (in this case the video) is not resizing properly . The video is sizing way too big for android - it is overfilling the screen. I had mentioned that previously when I said the poster image was not being responsive and not resizing properly. Maybe I wasn't making myself clear. If you take a look now you will see you get only a partial video and partial overlay. 3/4 of text is missing when you compare to PC text (and 3/4 of video). same on the "Cap and Gown Packages" link. Images not resizing to properly fit screen.
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.
Thank you - I appreciate the update and will look forward to your response tomorrow.
To further clarify exactly what is happening I will be sending you some screencaps
I have attached the PC version of the index page and the android version of same page. The andoid version is missing at least half the text overlay and video. It looks like they have not resized to android screen. This is also what the "poster" is doing for iphone- not resizing.
Here is PC index screen
Same problem occurs on my "cap and gown packages" page
Hello,
Thank You so much for your Patience! We have checked this out for you thoroughly and along with the Codes:
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.
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.
Thank you - I will remove the .force-full-screen
How do i compensate on mobile for the font-size on the h1 tag?
Is there a workaround that would strictly target mobile and reduce the H1 tag?
or is there a v=better way to enlarge the H1 tag so it doesnt effect mobile?
.. I removed .force-full-screen from the index.html file and no change occurred. Was I supposed to be removing .force-full-screen from one of the css files?
also the cap and gown packages file (which I also sent you screen caps of) doesn't have any .force-full-screen reference and I have the same problem with that page. I have included that image with this. Please look at the background image on this screenshot. 3/4 of the image is missing (not to mention text missing too).
Shouldn't background images be resizing to optimal size? That cant be optimal size. It's almost as if it is not resizing at all so its not fitting into the container at all.
Ok so last night I remembered about a friends website that was similar- I helped create it using Weebly and it uses a section full width background picture.
The site is www.misterblazer.com . Please look at it on the PC screen first. See the full image? Now look at it in the android version. It contains a completey scaled down version of the first picture, laid out properly for android.
So that leads me to theorize that either Weeblys responsive code is doing something to resize the image that yours is not or something is preventing your responsive code from resizing my images on android.
I have attached 2 screenshots - the first is the weebly designed PC version. The second is the Weebly designed android version. Rather than cut off the image, Weebly took the picture and scaled it down so much that you see the entire blazers. For some reason your code is not rescaling the images on a similarly designed website. (for a similar Canvas design see cap and gown on mine - http://achieva.us/Cap&Gown.html - totally not rescaling on Android... just staying as a large PC image.)
Now please dont take this the wrong way- I am not saying Weebly is better. Quite the opposite. I like your templates better. I am just saying that somehow their responsive code is reducing the background image for Android.
I am hoping seeing this will be a clue for you as to what is happening (or not happening) here.
Thank You
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:
-->
**ACHIEVA PRODUCTS**
**FOR ALL OF YOUR SCHOOLS RECOGNITION NEEDS**
**CAP AND GOWNS • GRADUATION RINGS • SCHOOL SPIRITWEAR**
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.
Have the same question, or something new?
Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.
Reply on the dashboard