Canvas Support

Video Background Not Working

12 replies · opened Apr 15, 2022

KKennethLeoHodgesApr 15, 2022

I started with a 1 page Gym template, and immediately tried to get a Auto Play Video Background to work where I would normally put a Slider.

It is not working at all. I cannot figure out why. Surely it must be something simple??

My site is: http://smarterwebtest.com/
Trying to get this result: https://www.patriotliner.com/

SSemicolon WebSTAFFApr 16, 2022

Hello,

We have tried checking your Website but your Page: http://smarterwebtest.com/ is not loading and times out.

Please provide us with a Valid Live URL so that we can check out the exact issue and provide you with more accurate assistance on this. 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.

KKennethLeoHodgesApr 18, 2022

We have a corporate firewall that blocks most foreign countries due to spam. Can you give me your IP block so I can whitelist it in the firewall please?

SSemicolon WebSTAFFApr 18, 2022

Hello,

We have tried checking your Website from the USA and still can't access your Website. Please provide us with unrestricted access (as we currently cannot disclose IP Addresses) so that we can check this issue out for you and provide you with further assistance. 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.

KKennethLeoHodgesApr 18, 2022

Thank you for understanding!!

You are so nice!!!

I will have the technicians disable our firewall now so you can come and take a look.

I hope it does not take you long, and I hope nothing happens in the meantime.

Thank you for being so nice!!!

I really appreciate you guys being soooo nice!!!

KKennethLeoHodgesApr 18, 2022

Hi,

The firewall is now disabled!!!

I hope you can take a minute from your very secret and busy day using a VPN to hide your IP address and take a look at our website!!!

Thank you for being sooo nice !!!!

Great service!!! 5 Stars !!!!

KKennethLeoHodgesApr 18, 2022

Good afternoon!!

In case you did not receive my last message, the firewall is now DOWN and we are VULNERABLE and ready for you to take a look at let us know what you think the problem is????

Thank you for being sooo nice !!!!!

KKennethLeoHodgesApr 18, 2022

Hello,

I am staying late at work so I can re-enable the firewall the minute you are done looking at the website :)

Please let me know WHEN you have found the problem!

Thank you for being so nice!!!

SSemicolon WebSTAFFApr 18, 2022

Hello,

Thanks for your Super Kind Patience and being so accommodating and so nice!

We have checked out your Website and the video AutoPlay is working fine. The .video-wrap is hidden and this can be fixed by simply adding the .z-auto Class to the .video-wrap Element.
[ch_pre][/ch_pre]

You can re-enable the Firewall.

Hope this Helps!

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

KKennethLeoHodgesApr 19, 2022

Hello,

That fixed it! THANK YOU !!! Maybe consider adding that information to your documentation, since I copied the example from your documentation directly into my test website. Would save you time in the future I think :)

I have been using Canvas since 2015, and this was my FIRST support request. Great code!

मैंने 255 आईपी पतों की पश्चिम बंगाल के लिए एक आईपी सफेद सूची बनाई है ताकि आप फ़ायरवॉल अक्षम की आवश्यकता के बिना भविष्य में उपयोग कर सकें। मैंने पनामा सिटी पनामा के लिए भी ऐसा ही किया।

Take care!

SSemicolon WebSTAFFApr 21, 2022

Hello,

Actually, when the .container DIV is removed, the z-index needs to be set to auto to make sure the Video is visible. We will make this more flexible in the next update.

Thanks or your Patience.

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

KKennethLeoHodgesApr 21, 2022

Should I Add a DIV container? Is that a better method to house a background video SECTION?

Also, is there a better method than Height= or min-height= ???

I want the video to retain the proper RATIO no matter the viewport width (auto scale).

What is the best way to do that?

SSemicolon WebSTAFFApr 22, 2022

Hello,

  1. Not at all, the current codes you are using are fine. If you plan to use Texts inside the Background Video Section, then we would recommend adding the .container DIV, this way the Content will be aligned properly.

  2. For Heights, we recommend the Utility Classes: https://docs.semicolonweb.com/docs/utility-classes/heights/ . This way the heights can be controlled across different devices.

  3. If your Section has no content but just the HTML5 Video, then we recommend using this code as this will scale nicely on all the Devices:
    [ch_pre]<div class="section py-0">
    <video poster="images/videos/deskwork.jpg" preload="auto" loop autoplay muted class="d-block w-100">
    <source src='images/videos/deskwork.webm' type='video/webm' />
    <source src='images/videos/deskwork.mp4' type='video/mp4' />

    </video>
    </div>[/ch_pre]

Hope this Helps!

Let us know if we can help you with anything else or if you find any further 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