9 replies · opened Nov 8, 2016
When I first open the site my index file does not size video properly. I use Chrome. Not sure of the issue in other browsers. When I hit any menu link and go back (or just hit Home) it is resized.
I know you had answered this previously and said that it was being worked on for future Canvas- but I hope you might have something I can code now to fix this.
Here is temp site to see effect:
[sb_private_reply]Anyone home?[/sb_private_reply]
Hello,
We have just checked out your Website and there are some Validation Issues on your Page: https://validator.w3.org/nu/?doc=http%3A%2F%2Fwww.achieva.us%2F . Please consider fixing them.
Additionally, please make sure that the Self hosted Videos you are planning to use are properly optimized. Try using either Handbrake: https://handbrake.fr/ or Miro Video Converter: http://www.mirovideoconverter.com/ to convert your Videos to .mp4 or .webm . These are really good & converts and optimizes videos to Smaller Size without degrading the quality.
Additionally, do make sure that the Videos are not too long, preferably within 12 to 30 Seconds. Do let us know if you are still facing issues.
Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.
WHAT???? You're telling me to use MP4 or webm? Did you really look at the code???
My code is as follows:
div class="video-wrap">
<video poster="http://www.achieva.us/images/Captoss.jpg" preload="auto" loop autoplay muted>
<source src="http://www.achieva.us/videos/Captoss.mp4" type="video/mp4" />
<source src="http://www.achieva.us/videos/Captoss.webm" type="video/webm" />
</video>
<div class="video-overlay" style="background-color: rgba(0,0,0,0.45);"></div>
</div>
It is MP4 and WEBM! So why are you telling me to use that? And I had already optimized it AND its an 11 second loop!
So I am not sure why you told me this when it is already DONE
So what else you got?
I removed all of the errors that show up on page validation except yours. This is from your code isnt it? It is in your templates
Error: Bad value http://fonts.googleapis.com/css?family=Lato:300,400,400italic,600,700|Raleway:300,400,500,600,700|Crete+Round:400italic for attribute href on element link: Illegal character in query: | is not allowed.
From line 9, column 2; to line 9, column 169
==== -->↩ <link href="http://fonts.googleapis.com/css?family=Lato:300,400,400italic,600,700|Raleway:300,400,500,600,700|Crete+Round:400italic" rel="stylesheet" type="text/css" />↩ <lin
Syntax of URL:
Any URL. For example: /hello, #canvas, or http://example.org/. Characters should be represented in NFC and spaces should be escaped as %20. Common non-alphanumeric characters other than ! $ & ' ( ) * + - . / : ; = ? @ _ ~ generally must be percent-encoded. For example, the pipe character (|) must be encoded as %7C.
OK it looks like the video problem may be gone after removing errors... but the error from line 9 is there and its on your templates the same way. is there a fix?
And again- not sure why you told me to use mp4 and webm when my code already called for that.
NO- I just checked live and the video problem is still there- even after removing the errors.
Hello,
Thank You for your Patience! We always check out the Live Previews along with the Codes before replying to the Support Queries! What we recommended in Our Replies is to use the mentioned softwares for converting your Videos so that it has the Best Compatibilities. Also, consider using a 1920x1080 Video Resolutions which are more commonly used and accepted.
Additionally, we requested you to correct the HTML Validations Errors which related only to Unclosed Tags, however the rest of the Errors can be ignored since the W3C Validator is completely compatible with HTML5 Markup.
Also, since this is not working for you, please consider finding the code below inside the SEMICOLON.documentOnLoad > init: function() Function Block in the js/functions.js File:
SEMICOLON.widget.html5Video();and replace it with:
setTimeout( function() { SEMICOLON.widget.html5Video(); }, 700 );This will definitely work fine. Let us know if we can help you with anything else or if you find any further issues.
OK! This is working fine now. Thank you. So I am curious- should this be implemented across all my future video pages? I am also trying to understand (learn) what this is doing? Was page loading too quickly and this is slowing uo the page/ video load?
Also all the errors on that page are gone- even the Canvas error- I replaced piping with "%7C" in your code per W3C validator. Removed all errors and seems fine.
Hello,
The Code which you have replaced in the js/functions.js File as mentioned above has already been applied to all your Page with Videos in it, so you do not need to do anything else and all the Future Videos will work fine automatically.
What we have done in the Codes is just delayed the Video Resizing by 700ms so that the Page is completely ready and properly laid-out before the Video Resizes to its correct size.
Hope this Helps! Thanks for your Patience.
Do let us know if we can help you with anything else or if you find any further issues with Canvas.
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