Canvas Support

Upgrading Canvas

7 replies·opened May 27, 2021
E
edhebertMay 27, 2021

Hi-

I am running Canvas 6.3 and having some trouble with Youtube backgrounds loading quite slowly. I noticed that the 6.4 changelog notes some improvements to the YouTube background workflow. I thought I might give this update a try.

What is the easiest way to upgrade versions of Canvas from 6.3 to 6.4? Must I upload ALL of the entire file structure, or just key app files? The entire package is a significant upload. Your documentation talks only about upgrading from v5 to v6.

Thanks

S
SemiColonWebSTAFFMay 27, 2021

Hello,

Apologies for the Inconveniences caused!

The Delay with YouTube Background Videos is more related to the Youtube APIs and JS Interaction with the Video Player and then its execution causing some delays. Also Videos are only played based on the API Events when the Player is ready to be played. The Latest Updates only affect the Youtube Bg Videos in Swiper Sliders.

Standalone Youtube BG Videos: http://themes.semicolonweb.com/html/canvas/sections.html are working as expected.

Please consider checking out the Changelog: http://docs.semicolonweb.com/docs/changelog/version-6-4/ to update to the Latest Version of Canvas. You can update the Files mentioned in the Changelog but since Canvas v6.4 uses Bootstrap 5, there are many Classes and HTML markup changes which have been updated in all the Files. So it is recommended to check the Bootstrap Migration Guide: https://getbootstrap.com/docs/5.0/migration/ to get an idea of all the affected Components and then make all the necessary changes. Before proceeding, do not forget to keep a backup of your Current Files.

Hope this Helps!

Please feel free to reach out to us for any further assistance.

E
edhebertMay 27, 2021

Thank you. Is there a way to preload a static image that will display until the YT video begins to load? That would be more engaging than a blank screen. Thanks!

S
SemiColonWebSTAFFMay 27, 2021

Hello,

Definitely Possible but needs some Customization. Consider replacing the existing js/plugins.min.js File with the attached file. Then use data-coverimage="path-to-image.jpg" Attribute on the .yt-bg-player Element.

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.

E
edhebertMay 27, 2021

Thank you for your continued support.

Can you please have a look at my code on the page below? The background image did not seem to load, and the video also does not autoplay. The console messages indicate that the YTPlayer is trying to start several times, and I don't know why.

http://reminc.info/new

I have the following code.

<div class="yt-bg-player customjs" data-autoplay="true" data-loop="true" data-quality="hd720" data-video="https://www.youtube.com/watch?v=KCRtxB84GNg" data-cover-image="{{siteUrl}}images/slider/swiper/1.jpg" data-fullscreen="true" data-start="20"></div>

At the bottom of the YouTube "div", I can see the tops of the of YouTube icons that appear of a YT page when a video is completed. As the code above shows, I would like the video to autoplay and loop when it is completed.

S
SemiColonWebSTAFFMay 27, 2021

Hello,

The js/plugins.js File does not seem to be updated correctly on your Servers. Please consider updating again.

Additionally, since you are using just 1 Slide, we recommend using the following code:

<section id="slider" class="slider-element slider-parallax min-vh-75 min-vh-md-100 include-header">
	<div class="slider-inner">

		<div class="container">
			<div class="slider-caption slider-caption-center">
				<h2 data-animate="fadeInUp">Hey there !</h2>
				<p data-animate="fadeInUp" data-delay="200">Have a wonderful day.</p>
			</div>
		</div>
		<div class="video-wrap">
			<div class="yt-bg-player" data-autoplay="true" data-loop="true" data-quality="hd720" data-video="https://www.youtube.com/watch?v=KCRtxB84GNg" data-cover-image="http://reminc.info/images/slider/swiper/1.jpg" data-fullscreen="true" data-start="20"></div>
			<div class="video-overlay" style="background-color: rgba(0,0,0,0.3);"></div>
		</div>

	</div>
</section>

This does not initialize the Slider and works much faster. Hope this Helps!

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

E
edhebertMay 27, 2021

Thank you. I updated your HTML and the video is now autoplaying.

I double-checked, and re-uploaded v6-3-plugin.min.js file that you sent me (not plugin.js). I renamed and overwrote this file to plugins.min.js, which I assume is correct. I even verified the new file by adding a small comment "v6.3 file" to the plugins.min.js file. You can see the new file here http://reminc.info/js/plugins.min.js

At this point two issues remain:

  • I still can not load my cover image, and

  • I would like to have this video behave like a "dark" slide (i.e., load the "dark" versions of logo, navigation, and heading elements).

Thanks again

S
SemiColonWebSTAFFMay 27, 2021

Hello,

  1. The js/plugins.min.js File is now updated.

  2. This appears to be a JS execute delay which was fixed in v6.4. Simply adding a Background Image to the .video-wrap Element should fix this. Example:

<section id="slider" class="slider-element slider-parallax min-vh-75 min-vh-md-100 include-header dark">
	<div class="slider-inner">

		<div class="container">
			<div class="slider-caption slider-caption-center">
				<h2 data-animate="fadeInUp">Hey there !</h2>
				<p data-animate="fadeInUp" data-delay="200">Have a wonderful day.</p>
			</div>
		</div>
		<div class="video-wrap" style="background: url('http://reminc.info/images/slider/swiper/1.jpg') center center no-repeat; background-size: cover;">
			<div class="yt-bg-player" data-autoplay="true" data-loop="true" data-quality="hd720" data-video="https://www.youtube.com/watch?v=KCRtxB84GNg" data-cover-image="http://reminc.info/images/slider/swiper/1.jpg" data-fullscreen="true" data-start="20"></div>
			<div class="video-overlay" style="background-color: rgba(0,0,0,0.3);"></div>
		</div>

	</div>
</section>
  1. Adding the .dark Class to the <header> Tag will fix this.

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