Youtube background video distorted height/dimensions

5 replies · opened May 9, 2020

HhoniedewMay 9, 2020

Hello, I have a Youtube video that I have embedded in my page for autoplay. However, the width/length dimensions of the video show up distorted/cut off. I've tried adjusting the height in the div codes but no luck. Here is my test link:
http://easytork.com/yt.html

Thanks in advance for the help.

SSemicolon WebSTAFFMay 10, 2020

Hello,

Thanks for your Patience!

Apologies about the Inconveniences! We have checked this out and yes there is a minor bug in the code which is causing this. We have fixed this in Canvas 6. Meanwhile, to fix this yourself, simply use the following code:


	

This should definitely fix your issue. Hope this Helps!

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

HhoniedewMay 10, 2020

Hi thank you for your response. Unfortunately I changed the code to the above and it appears the video doesn’t show up when I enter the style height of 100%. And changing from 100% to a fixed height (e.g. 540px) gives me the same cutoffs of the video as before. Please see my updated page based on this change. The code from line 371-376 in a text editor. Thank you again.

SSemicolon WebSTAFFMay 10, 2020

Hello,

Thanks for your Patience!

We have tried testing this and the conclusion we have come to, after testing this with different combinations for a while is that, the Aspect Ratio of your Video and the way you want to display your Video (as this is an Informational Video) is not best recommended to be used as a Youtube BG. The Usage Case of your Video will be best suited as an Embedded Video. The Function of the Youtube BG element is make the Video Fill the Container, adjusting the positions which does not make it an ideal choice for your Video. And it is also not responsive as you will need to set a fixed height for the Video to display properly. We have 1920x1080 Screen and the Code that works best for us is:


	
		How It Works:

		
See how one of our actuator models mounts to a ISO ball valve with square stem and to a non-ISO butterfly valve with a DD stem.

	

	
		
			
		
	

Hope this makes things clearer. So, it is much recommended to use your Youtube Video as an Embedded Video.

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

HhoniedewMay 10, 2020

I understand better the intention of the background YouTube function now. Thank you for the time. Apologies for making you jump through hoops. I will make embedded videos instead to better accommodate.

SSemicolon WebSTAFFMay 11, 2020

Hello,

No Problem at all! In fact while testing, we got to learn this as well, and this will help us add some excerpts to the Documentation regarding this. Thank You so much for understanding!

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